步骤：
1、布局：
outer[div]
----imgList[ul]
----li(总共5个)
----img(放轮播图)
----navDiv[div]
----a（总共5个）
2、原理：
- outer作为“屏幕”，超出屏幕的部分hidden。
- imgList里面的li排成一排，imgList包含在outer中。
- JS控制imgList，左右移动。
- a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。
3、注意：
- move函数的实现，应该好好理解。
- 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。
- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。
测试代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><!--步骤：1、布局：outer[div]----imgList[ul]----li(总共5个)----img(放轮播图)----navDiv[div]----a（总共5个）2、原理：- outer作为“屏幕”，超出屏幕的部分hidden。- imgList里面的li排成一排，imgList包含在outer中。- JS控制imgList，左右移动。- a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。3、注意：- move函数的实现，应该好好理解。- 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。--><style type="text/css">* {margin: 0;padding: 0;}#outer {width: 500px;height: 333px;margin: 10px auto;/*左右居中*/background-color: greenyellow;padding: 10px 0;/*设置上下的padding为10px*/position: relative;overflow: hidden;}#imgList {list-style: none; /*去除li的默认样式*/width: 2600px;left:0px;position: absolute;/*开启绝对定位，便于移动*/}#imgList li {float: left;/*float:父元素够大的时候，才会横排*/}#navDiv {position: absolute;/*设置绝对定位，才能显示到上面*/bottom: 15px;}#navDiv a {float: left;/*浮动，脱离文档流，横排*/width: 12px;height: 12px;margin: 0 5px;background-color: red;opacity: 0.5;/*兼容IE8透明*/filter: alpha(opacity=50);}#navDiv a:hover {background-color: black;}</style><script src="js/tools.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload = function() {//获取节点var outer = document.getElementById("outer");var imgList = document.getElementById("imgList");var countImg = imgList.getElementsByTagName("li");var navDiv = document.getElementById("navDiv");var allA = navDiv.getElementsByTagName("a");//第一张图片的a标签先被选中var indexA = 0;allA[indexA].style.backgroundColor = "black";//为所有的a标签绑定单击响应函数for (var i = 0; i < allA.length; i++) {//保存超链接所在索引（前面的课程说过为什么这样）allA[i].num = i;//绑定单击响应函数allA[i].onclick = function() {//点击超链接时，应该停止轮播定时器，不然会出现两个动画clearInterval(idTimer);//点击超链接，切换图片indexA = this.num;move(imgList,"left",indexA*-500,20,function(){//点击的动画执行完了，开启轮播定时器autoChange();});//a标签颜色处理mutexA();}}//设置导航按钮居中var navDivWidth = parseInt(getComputedStyle(navDiv,null)["width"]);var outerWidth = parseInt(getComputedStyle(outer,null)["width"]);navDiv.style.left = (outerWidth - navDivWidth)/2 + "px";//设置imgList宽度（图片+20）*数量var imgWidth = 500;var imgMargin = 0;imgList.style.width = (imgMargin + imgWidth)*countImg.length + "px";//轮播图片var idTimer;function autoChange() {idTimer = setInterval(function() {indexA++;//a标签设置move(imgList,"left",indexA*-500,20,function(){mutexA(allA,indexA);});},3000);}//开启定时器autoChange();//互斥a标签function mutexA() {//索引值回到开头if( indexA >= countImg.length - 1) {indexA = 0;imgList.style.left = 0 + "px";}//该索引a标签变黑色，其它标签红色for (var j = 0; j < allA.length; j++) {if( j == indexA ) {allA[j].style.backgroundColor = "black";} else {allA[j].style.backgroundColor = "";//这样做是因为，内联样式优先级更高，//直接设置为red，会覆盖hover效果，//这里直接去掉内联样式，它就受style里面的样式控制了}}}}</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>
