<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div_c{ width: 400px; height: 200px; position: relative; } #div_c img{ width: 400px; height: 200px; position: absolute; top: 0; left: 0; } .zindex{ z-index: 100; } .zindex0{ z-index: 0; } #oul{ position: absolute; left: 250px; top: 155px; z-index: 101; } #oul li{ width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.3); float: left; list-style: none; margin: 2px; cursor: pointer; } </style> </head> <body> <div id="div_c"> <img class="zindex" src="http://img.taopic.com/uploads/allimg/110812/1820-110Q20K24526.jpg"/> <img src="http://wenwen.soso.com/p/20090901/20090901120135-1666292770.jpg"/> <img src="http://pica.nipic.com/2007-12-18/200712189215503_2.jpg"/> <img src="http://h.hiphotos.baidu.com/zhidao/pic/item/5bafa40f4bfbfbed0470471b78f0f736afc31fac.jpg"/> <img src="http://img3.redocn.com/20091221/20091217_fa2a743db1f556f82b9asJ320coGmYFf.jpg"/> <ul id="oul"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script>//我这个只能实现循环，其他点击更换图片效果还没加 var div_c=document.getElementById('div_c'); var oul=document.getElementById('oul'); var imgs=div_c.getElementsByTagName('img'); var lis=oul.getElementsByTagName('li'); var i=0; setInterval(function(){ if(i==0){//之所以加一个if判断是以为纠正上一次循环后要改变最后一个img的样式为zindex0，同时设置imgs[0]的样式为显示;不然的话最后一个img就一直是zindex样式了 imgs[0].className="zindex";//样式为zindex就显示在最顶层，z-index值为100 imgs[4].className="zindex0";//样式为zindex0，z-index值就为0 }else{ imgs[i].className="zindex"; imgs[i-1].className="zindex0"; } i++; i=i%5;//求余，重新来过 },3000); </script> </body> </html>