dreamweaver制作网页时如何使几张图片在同一位置分别以不同方式循环变换？ 15

右下角分别有123的数字，图片变换时数字也跟着一起变换，并且鼠标点击数字可以进行图片切换？... 右下角分别有1 2 3的数字，图片变换时数字也跟着一起变换，并且鼠标点击数字可以进行图片切换？展开

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

xueyang365
2012-05-30

知道答主

回答量：21

采纳率：0%

帮助的人：10.4万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换demo</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script language="javascript" src="js/chang.js"></script>
</head>

<body onload="test()">
<div id="imgt">

<div id="img1">
<img src="images/a.jpg" />
</div>

<div id="img2">
<img src="images/b.jpg" />
</div>

<div id="img3">
<img src="images/c.jpg" />
</div>

<div id="img4">
<img src="images/d.jpg" />
</div>

<div id="imgtitle">
<ul>
<li id="t1">1</li>
<li id="t2">2</li>
<li id="t3">3</li>
<li id="t4">4</li>
</ul>
</div>

</div>
</body>
</html>

js脚本
// JavaScript Document
var t=1;
function test()
{
if(t==5)
t=1;
change(t++);
setTimeout(test,1000);
}

function change(x)//让imgx显示而让其他的不显示
{
for(i=1;i<5;i++)
{
document.getElementById("img"+i).style.display="none";
document.getElementById("t"+i).style.backgroundColor="#ffffff"//让所有的标题背景变白
}
document.getElementById("img"+x).style.display="block";
document.getElementById("t"+x).style.backgroundColor="#cccccc"; //让特定的标题背景变成灰色
}

css样式
@charset "utf-8";
/* CSS Document */

#imgt img{ width:130px; height:100px;}
#imgt { width:130px; height:120px;}
#imgt div{ width:130px; height:100px;}
#img1 { display:block}
#img2 { display:none}
#img3{ display:none}
#img4{ display:none}
#imgtitle ul { margin:0px; padding:0px;}
#imgtitle ul li{ float:left; width:20px; height:5px; border:1px #CCC solid; margin-left:2px; text-align:center; cursor:pointer}

恩你自己换上图片就能用了