<style type="text/css">
.img{display:none;}
#dian{ 300px; height:20px; position:relative; top:-30px; left:400px }
.yuan{20px; height:20px; background-color:#FFF; border:2px solid #0F6; border-radius:100px; float:left; margin-left:10px}
</style>
</head>
<body>
<div style="600px; height:300px;">
<img style=" display:block;" class="img" src="file:///C|/Users/pc/Pictures/79077653_1.jpg" width="600px" height="300"/>
<img class="img" src="file:///C|/Users/pc/Pictures/2009040622372519.jpg" width="600px" height="300" />
<img class="img" src="file:///C|/Users/pc/Pictures/373957f8f23c4023a2705e385861740a.jpg" width="600px" height="300" />
<img class="img" src="file:///C|/Users/pc/Pictures/140-16011Q52512.jpg" width="600px" height="300"/>
<img class="img" src="file:///C|/Users/pc/Pictures/140-150QZU313.jpg" width="600px" height="300" />
</div>
<div id="dian">
<div bs="0" class="yuan" onclick="xianshi(this,'0')"></div>
<div bs="1" class="yuan" onclick="xianshi(this,'1')"></div>
<div bs="2" class="yuan" onclick="xianshi(this,'2')"></div>
<div bs="3" class="yuan" onclick="xianshi(this,'3')"></div>
<div bs="4" class="yuan" onclick="xianshi(this,'4')"></div>
</div>
</body>
<script type="text/javascript">
//图片索引
var sy=0;
//间隔时间
window.setInterval("Huan()","4000");
//掉一下换一个
function Huan()
{
var img=document.getElementsByClassName("img");
sy++; //索引加1
//判断到了最后一张
if(sy>=img.length)
{
sy=0;
}
//让所有隐藏
for(var i=0;i<img.length;i++)
{
img[i].style.display="none";
}
//让下一张显示
img[sy].style.display="block";
//换圆点的样式
var yuan = document.getElementsByClassName("yuan");
for(var j=0;j<yuan.length;j++)
{
if(yuan[j].getAttribute("bs")==sy)
{
yuan[j].style.borderColor = "red";
}
else
{
yuan[j].style.borderColor = "#0F6";
}
}
}
function xianshi(t,s)
{
sy=s;
var img = document.getElementsByClassName("img");
//让所有隐藏
for(var i=0;i<img.length;i++)
{
img[i].style.display="none";
}
//让下一张显示
img[s].style.display="block";
//改自身样式
var yuan = document.getElementsByClassName("yuan");
for(var j=0;j<yuan.length;j++)
{
yuan[j].style.borderColor="#0F6";
}
t.style.borderColor="red";
}
</script>