5

<div id="ad"> <!--图片--> <ul> <li class="show"><a href="#"><img src="images/a.jpg"></a></li> <li><a href="#"><img src="images/b.jpg"></a></li> <li><a href="#"><img src="images/c.jpg"></a></li> <li><a href="#"><img src="images/d.jpg"></a></li> </ul> <!--小圆点--> <p> <span class="show" title="0"></span> <span title="1"></span> <span title="2"></span> <span title="3"></span> </p> </div> //js //查找要修改的元素：img&span var img=document.querySelectorAll("#ad li"); var span=document.querySelectorAll("#ad span"); //功能1：自动轮播 var count=0; //设置周期性定时器 var timer=setInterval(task,1000); function task(){ img[count].className=""; span[count].className=""; count++; if(count==img.length)count=0; img[count].className="show"; span[count].className="show"; } //功能2：鼠标移入移出，轮播停止开始 var ad=document.getElementById("ad"); ad.onmouseover=function(){ clearInterval(timer); timer=null; } ad.onmouseout=function(){ timer=setInterval(task,1000); } //功能3：移入小圆点，显示对应图片 for(var i=0;i<span.length;i++){ span[i].onmouseover=function(){ /*第一种方法：优点是好理解，缺点是，要给每一个span一个固定的title属性值*/ //判断移入的是否是当前显示的。 /*if(count!=parseInt(this.title)){ //如果不是，把当前的取消 img[count].className=""; span[count].className=""; //把移入的下标赋值给count count=parseInt(this.title); //显示 img[count].className="show"; span[count].className="show"; //因为这样是通过改变下标count的值来改变显示位置，所以移开时，就会从当前count开始轮播。 }*/ /*第二种方法：优点：不需要title。缺点：慢*/ for(var j=0;j<span.length;j++){ if(this==span[j]){//通过遍历判断获得移入的小圆点的下标 if(count!=j){ //此if语句代码与第一种相同，第一种的title换成了j，都是表示获取到的下标 img[count].className=""; span[count].className=""; count=j; img[count].className="show"; span[count].className="show"; } break; } } } } //css ul{margin: 0;padding: 0;} #ad{ width: 480px; height: 360px; position: relative; } #ad li{ list-style: none; position: absolute; left: 0; top: 0; opacity: 0; transition: all 1s; } #ad p{ position: absolute; left: 0; bottom: 30px; width: 100%; text-align: center; } #ad p span{ display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #999; cursor: pointer; } #ad li.show{ opacity: 1; } #ad p span.show{ background: #fff; }