<div id="zuiwaiceng">
<img name="abc" src="img/a1.jpg" height="100%" width="100%" style="display: block;"/>
<img name="abc" src="img/a2.jpg" height="100%" width="100%"/>
<img name="abc" src="img/a3.jpg" height="100%" width="100%"/>
<img name="abc" src="img/a4.jpg" height="100%" width="100%"/>
<img name="abc" src="img/a5.jpg" height="100%" width="100%"/>
</div>
<div id="yuandian">
<div class="yuanquan" style="background-color: blue" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(0)"></div>
<div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(1)"></div>
<div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(2)"></div>
<div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(3)"></div>
<div class="yuanquan" onmouseover="yiru()" onmouseout="yichu()" onclick="dianji(4)"></div>
</div>
<div class="xx" style="background-image: url(img/bbbb.png);"></div>
<div class="xx" style="background-image: url(img/aaaa.png);"></div>
</body>
</html>
<!-- /*定义一个索引*/-->
<!--显示与隐藏图片-->
<!--添加定时器-->
<!--实现循环-->
<script type="text/javascript">
var index = 0;
var dd = document.getElementsByName('abc');
var hh = document.getElementsByClassName("yuanquan");
var gb = setInterval("lunbo()",2000);
function lunbo(){
index++;
if(index>=dd.length){
index = 0;
}
for(var i= 0;i<dd.length;i++){
hh[i].style.backgroundColor = "aqua";
dd[i].style.display = "none";
}
dd[index].style.display = "block";
hh[index].style.backgroundColor = "blue";
}
function dianji(bs){
for(var i= 0;i<dd.length;i++){
hh[i].style.backgroundColor = "aqua";
dd[i].style.display = "none";
}
dd[bs].style.display = "block";
hh[bs].style.backgroundColor = "blue";
index = bs;
}
function yiru(){
window.clearInterval(gb);
}
function yichu(){
gb = setInterval("lunbo()",2000);
}