案例：完整的轮播图
思路：
分5部分做
1. 获取所有要用的元素
2. 做小按钮，点击移动图标部分
3. 做右边焦点按钮，点击移动图片，小按钮颜色一起跟着变 （克隆了第一图到第六图，用索引liObj.setAttribute("index", i)，pic = this.getAttribute("index");pic++, 当pic到5的时候，就回到pic=0的时候，同时设置样式）
4. 做左边焦点按钮 (用索引，当pic=0的时候，pic--，设置样式)
5. 自动轮播加上，设置个定时器，鼠标进入就清除定时器，鼠标移开就启用定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: #DB192A; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="screen"> <!--相框--> <ul> <li><img src="images/1.jpg" width="500" height="200" /></li> <li><img src="images/2.jpg" width="500" height="200" /></li> <li><img src="images/3.jpg" width="500" height="200" /></li> <li><img src="images/4.jpg" width="500" height="200" /></li> <li><img src="images/5.jpg" width="500" height="200" /></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script src="common.js"></script> <script> //获取最外面的div var box = my$("box"); //获取相框 var screen = box.children[0]; //获取当前相框的宽度 var imgWidth = screen.offsetWidth; //获取ul var ulObj = screen.children[0]; //获取ul中所有的li var list = ulObj.children; //获取ol var olObj = screen.children[1]; //获取焦点的div var arr = my$("arr"); var pic = 0;//全局变量 //创建小按钮，根据ul中li的个数 for (var i = 0; i < list.length; i++) { //创建li标签，加入到ol中 var liObj = document.createElement("li"); olObj.appendChild(liObj); liObj.innerHTML = (i + 1); //在每个ol中的li标签上添加一个自定义属性，存储索引值 liObj.setAttribute("index", i); //注册鼠标进入时间 liObj.onmouseover = function () { //先干掉所有ol中的li背景颜色 for (var j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } //设置当前鼠标进入li的背景颜色 this.className = "current"; //设置鼠标进入的li的当前索引值 pic = this.getAttribute("index"); //移动ul animate(ulObj, -pic * imgWidth); }; } //克隆一个ul中第一个li，加入到ul中的最后----克隆 ulObj.appendChild(ulObj.children[0].cloneNode(true)); // 自动播放 var timeId = setInterval(clickHandle, 1000); //鼠标进入到box 显示左右焦点的div box.onmouseover = function () { arr.style.display = "block"; //鼠标进入废掉之前的定时器 clearInterval(timeId); }; //鼠标离开box，隐藏左右焦点的div box.onmouseout = function () { arr.style.display = "none"; timeId = setInterval(clickHandle, 1000); }; //右边按钮 my$("right").onclick = clickHandle; function clickHandle() { //如果pic的值是5，恰巧是ul中li的个数-1的值，此时页面显示第六个图片 //而客户认为这是一个图，所以如果用户再次点击按钮，应该看到第二个图片 if (pic == list.length - 1) { //如何从第六个图跳转到第一个图 pic = 0; //先设置pic=0; ulObj.style.left = 0 + "px";//把ul位置还原成开始的默认位置 } pic++;//立刻设置pic+1，那么用户就会看到第二个图片； animate(ulObj, -pic * imgWidth); //如果pic==5,此时显示第六个图，内容是第一张图片，第一个小按钮有颜色 if (pic == list.length - 1) { //第五个颜色干掉 olObj.children[olObj.children.length - 1].className = ""; olObj.children[0].className = "current"; } else { //干掉所有小按钮背景颜色 for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } olObj.children[pic].className = "current"; } }; //左边按钮 my$("left").onclick = function () { if (pic == 0) { pic = 5; ulObj.style.left = -pic * imgWidth + "px"; } pic--; animate(ulObj, -pic * imgWidth); //设置小按钮的颜色---先所有小按钮干掉颜色 for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } //当前pic索引对应的按钮，设置颜色 olObj.children[pic].className = "current"; }; // </script> </body> </html>