先上图，效果大概就是这样子：
实现的功能：
1.鼠标经过第几个正方形，就要展示第几张图片，并且正方形的颜色也发生变化
2.图片自动轮播，（这需要一个定时器）
3.鼠标经过图片，图片停止自动播放（这需要清除定时器）
4.鼠标离开图片，图片继续自动轮播 （重新开始定时器）
二话不说就上代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ margin: 50px auto; width: 520px; height: 333px; background-color: pink; padding: 10px 0px; position: relative; overflow: hidden; } #imgList{ /*取出项目符号*/ list-style: none; position: absolute; } #imgList li{ float: left; margin: 0px 10px; } #navDiv{ position: absolute; /*设置位置*/ bottom: 15px; } #navDiv a{ float: left; width: 15px; height: 15px; background: red; margin: 0 5px; opacity: 0.5; /*兼容IE8的透明*/ filter: alpha(opacity=50); } #navDiv a:hover{ background: gray; } </style> <script type="text/javascript" src="../js/tools.js"></script> <script type="text/javascript"> window.onload = function(){ imgList = document.getElementById("imgList"); imgarr = document.getElementsByTagName("img"); imgList.style.width = 520*imgarr.length + "px"; //设置导航居中 var navDiv = document.getElementById("navDiv"); var outer = document.getElementById("outer"); navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; //设置默认开始的图片 var index = 0; var allA = document.getElementsByTagName("a"); allA[index].style.backgroundColor = "gray"; /* * 2、实现的功能是点击超链接实现图片的切换 */ for (var i =0 ;i<allA.length;i++){ //因为for循环是一上来就执行了，还没到点击就执行了，执行到了第五个，所以点击后数字都是5 //为每个超链接都添加一个num属性 allA[i].num = i; //为超链接绑定单击响应函数 allA[i].onclick = function(){ clearInterval(timer); //点击超链接切换图片，让图片左移即可 index = this.num; //修改选中的超链接的颜色,但是这样子的话，没点一个就叠加变成了灰色，我们想要的是哪个点击哪个就是灰色。 //imgList.style.left = index*-520 + "px"; setA(); move(imgList,-520*index,20,'left',function(){autoChange();}) } } //创建一个方法来设置a的样式 function setA(){ if(index>=imgarr.length-1){ //设置index为0 index=0; //防止向左开始把图片转回去 //就是把图片的css改回去跟开始一样即可,实现左右滚动的效果 imgList.style.left = 0; } for(var i=0; i<allA.length;i++){ //设置为空，就默认之前的颜色，要不然如果设置red，hover就不生效了，因为这个a的样式优先级没有内联样式高。 allA[i].style.backgroundColor = ""; } allA[index].style.backgroundColor = "gray"; } autoChange(); //创建一个函数，定时去切换图片 var timer; function autoChange(){ timer = setInterval(function(){ //使索引自增 index ++; index = index % imgarr.length; console.log(index); //index %= allA.length; move(imgList,-520*index,20,'left',function(){setA()}) },3000); } } </script> </head> <body> <div id="outer"> <ul id="imgList"> <li><img src="../img/1.jpg"/></li> <li><img src="../img/2.jpg"/></li> <li><img src="../img/3.jpg"/></li> <li><img src="../img/4.jpg"/></li> <li><img src="../img/5.jpg"/></li> <!--添加一个防止最后一个一下子闪退到前面第一个--> <li><img src="../img/1.jpg"/></li> </ul> <!--创建导航链接--> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html>