<!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>无标题文档</title>
<style type="text/css">
#tupian{ width:184px; height:279px;}
.tu{ display:none;}
#yuan{ width:200px; height:20px;}
.yuan1{width:15px; height:15px; border:2px solid #00F; float:left; margin-left:10px;border-radius:100px; background-color:#FFF}
.yuan1:hover{ cursor:pointer}
</style>
</head>
<body>
<div id="tupian">
<img style="display:block" class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r2.jpg"/>
<img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/img3.jpg"/>
<img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r3.jpg"/>
<img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r4.jpg"/>
<img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r5.jpg"/>
<img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r6.jpg"/>
</div>
<br />
<div id="yuan">
<div ba="0" class="yuan1" onclick="xianshi(this,'0')"></div>
<div ba="1" class="yuan1" onclick="xianshi(this,'1')"></div>
<div ba="2" class="yuan1" onclick="xianshi(this,'2')"></div>
<div ba="3" class="yuan1" onclick="xianshi(this,'3')"></div>
<div ba="4" class="yuan1" onclick="xianshi(this,'4')"></div>
<div ba="5" class="yuan1" onclick="xianshi(this,'5')"></div>
</div>
</body>
</html>
<script type="text/jscript">
var sy = 0;
window.setInterval("LunBo()",1000);
function LunBo()
{
var tu = document.getElementsByClassName("tu");
sy++;
if(sy>=tu.length)
{
sy=0;
}
for(var i=0;i<tu.length;i++)
{
tu[i].style.display = "none";
}
tu[sy].style.display = "block";
var yuan = document.getElementsByClassName("yuan1");
for(var j=0;j<yuan.length;j++)
{
if(yuan[j].getAttribute("ba")==sy)
{
yuan[j].style.borderColor = "green";
}
else
{
yuan[j].style.borderColor = "red";
}
}
}
/*var sy = 0;
//间隔调用
window.setInterval("Huan()",3000);
//调一下换一个
function Huan()
{
var img = document.getElementsByClassName("tu");
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("yuan1");
for(var j=0;j<yuan.length;j++)
{
if(yuan[j].getAttribute("ba")==sy)
{
yuan[j].style.borderColor = "green";
}
else
{
yuan[j].style.borderColor = "red";
}
}
}*/
function xianshi(t,s)
{
sy=s;
var img = document.getElementsByClassName("tu");
//让所有隐藏
for(var i=0;i<img.length;i++)
{
img[i].style.display="none";
}
//让下一张显示
img[s].style.display="block";
//改自身样式
var yuan = document.getElementsByClassName("yuan1");
for(var j=0;j<yuan.length;j++)
{
yuan[j].style.borderColor="red";
}
t.style.borderColor="green";
}
</script>