效果如下

功能分析

1.每隔1秒换一张图片

2.鼠标移入停止切换、鼠标离开继续切换

3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色

4.鼠标离开数字,从该数字后面继续显示

代码如下

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title></title><linkrel="stylesheet"href=""><styletype="text/css">div,img,ul,li{padding:0px;margin:0px;}.content{width:480px;height:300px;border:1pxsolidred;margin:100pxauto;}img{width:100%;height:100%;padding-bottom:10px;}ulli{list-style:none;float:left;border:1pxsolidorange;height:30px;width:58px;text-align:center;line-height:30px;}</style></head><body><divclass="content"><imgsrc="./img/1.jpg"alt=""><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></div><scripttype="text/javascript">varoImg=document.getElementsByTagName('img')[0];varcount=1;functionchangePic(){count++;if(count>8){count=1;}oImg.src='img/'+count+'.jpg';}varinterID=setInterval(changePic,1000);//鼠标移入停止播放oImg.onmouseover=function(){clearInterval(interID);}//鼠标移出继续播放oImg.onmouseout=function(){//console.log(interID);clearInterval(interID);interID=setInterval(changePic,1000);}//鼠标移入到数字上的时候,显示对应的图片varoLi=document.getElementsByTagName('li');//console.log(oLi.length);for(varnum=0;num<oLi.length;num++){//给每个li标签增加属性，保存当前的索引位置oLi[num].index=num;//移到到数字上,停止播放oLi[num].onmouseover=function(){//停止播放clearInterval(interID);this.style.background='orange';count=this.index;//调用循环播放图片方法changePic();}//移出时,继续从停止的地方播放oLi[num].onmouseout=function(){clearInterval(interID);interID=setInterval(changePic,1000);this.style.background='white';count=this.index;changePic();}}</script></body></html>