- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。
测试代码
<!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>