效果如下
功能分析
1.每隔1秒换一张图片
2.鼠标移入停止切换、鼠标离开继续切换
3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色
4.鼠标离开数字,从该数字后面继续显示
代码如下
<html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> div,img,ul,li{margin:0;padding:0;} #pic{width:480px;height:300px;margin: 100px auto} #pic img{width: 100%;height: 300px;border: 1px solid #ccc} #pic li{list-style: none;float: left;border:1px solid orange;width:58px;height:30px;text-align: center;line-height: 30px} </style> </head> <body> <div id="pic"> <img src="img/1.jpg"> <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> <script type="text/javascript"> //1. 设置定时器，每隔1000毫秒执行changePic函数 var interID = setInterval(changePic, 1000); var oImg = document.getElementsByTagName('img')[0]; //3. 鼠标移入到数字上的时候，显示对应的图片 var oLis = document.getElementsByTagName('li'); var count = 1; function changePic(){ oImg.src = 'img/'+count+'.jpg'; //先让所有的li标签背景都为空 for(var i=0;i<oLis.length;i++){ oLis[i].style.background = ''; } //让和图片序号对应的li标签背景显示橙色 count-1 oLis[count-1].style.background = 'orange'; count ++; if(count>8){ count = 1; } } //鼠标移入停止播放 oImg.onmouseover = function(){ clearInterval(interID); } //鼠标离开继续播放 oImg.onmouseout = function(){ clearInterval(interID); interID = setInterval(changePic, 1000); } console.log(oLis.length); for(var i=0;i<oLis.length;i++){ //给每个li标签增加属性oindex保存当前的索引 oLis[i].oindex = i; oLis[i].onmouseover = function(){ //console.log(i); // //停止播放 clearInterval(interID); //设置li标签的背景颜色 this.style.background = 'orange'; count = this.oindex+1; changePic(); } oLis[i].onmouseout = function(){ clearInterval(interID); interID = setInterval(changePic, 1000); } } </script> </body> </html>