直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rotation_chart</title> <style> *{margin: 0;padding: 0;border: 0;list-style: none;} #all{ width: 490px;height: 270px;padding: 7px;margin: 60px auto;/*左右居中*/ border:1px solid rgb(0,0,0,.4); } #screen{width: 490px;height: 270px;position: relative;overflow: hidden;} #all ul{width: 3000px; /*横向放图片*/position: absolute;left:0;top: 0;} #all ul li{width: 490px;height: 270px;float: left;} #screen img{width: 490px;height: 270px;} #all ol{position: absolute;right: 30px;bottom: 20px;} #all ol li{ float: left;width: 20px;height: 20px;line-height: 20px;text-align: center;margin-left: 8px; border: 2px solid #fff;border-radius: 50%;background: rgb(255,250,250,.9);cursor: pointer; } /*标签后的类不能有空格？？？*/ #all ol li.current{background: #58bc58;} #arr{display: none;z-index: 1;} #arr span{ display: block;width: 40px;height: 40px;position: absolute;top: 50%;margin-top:-20px;line-height: 40px; text-align: center; /*font-family: "黑体"； font-size:40px;*/ background-color: rgb(0,0,0,.15);color: #fff;cursor: pointer; } #arr #arr_l{left: -3px;border-top-right-radius:20px;border-bottom-right-radius:20px;} #arr #arr_r{right: -3px;border-top-left-radius:20px;border-bottom-left-radius:20px;} </style> <script type="text/javascript" src="animate.js"></script> <script type="text/javascript" src="common.js"></script> </head> <body> <div id="all" class="box"> <div id="screen"> <ul> <li><img src="images/ad1.jpg" alt=""></li> <li><img src="images/ad2.jpg" alt=""></li> <li><img src="images/ad3.jpg" alt=""></li> <li><img src="images/ad4.jpg" alt=""></li> <li><img src="images/ad5.jpg" alt=""></li> </ul> <ol></ol> <div id="arr"> <!-- >大于号，<小于号 --> <span id="arr_l"><</span><span id="arr_r">></span> </div> </div> </div> <script> //获取元素 //类名不能用mouseover\mouseout???? // var box = document.getElementsByClassName("box"); var all = document.getElementById("all"); var screen = document.getElementById("screen"); var ul = screen.children[0]; var ol = screen.children[1]; //获取箭头 var arr = document.getElementById("arr"); var arr_l = arr.children[0]; var arr_r = arr.children[1]; //1.序列自动生成，点击序列，实现滚动 var count = ul.children.length; for (var i = 0; i < count; i++) { var li = document.createElement("li"); ol.appendChild(li); // li.innerHTML = i+1; setInnerText(li,i+1); //自定义函数，添加li的文本内容，从一开始的数字 //记录自己的索引 li.setAttribute("index", i); /*不是函数调用，将liclick赋给onclick（引用）,直接循环里写ONCLICK函数会导致每次循环都加载存储一遍，消耗内存*/ li.onclick = liClick; } //设置第一个li为当前li ol.children[0].className = "current"; //图片宽度 var imageWidth = screen.offsetWidth; function liClick() { //清空当前高亮li for(var i = 0; i < ol.children.length; i++){ ol.children[i].className = ''; } this.className = 'current'; //获取的元素属性均为字符串，转为数字 var index = parseInt(this.getAttribute("index")); animate(ul, -index * imageWidth); } //2.显示箭头，点击箭头实现左右滚动 //显示箭头，mouseover、mouseenter的区别看note.md文件，或console面板感受 all.onmouseenter = function() { arr.style.display = 'block'; // console.log('block'); // 鼠标放盒子上清楚定时器 clearInterval(timeId); }; all.onmouseleave = function() { arr.style.display = 'none'; // console.log('none'); // 鼠标离开盒子，重新开定时器 timeId = setInterval(function(){ arr_l.click(); },2000); }; var index = 0;//设第一张图片的索引为0 arr_l.onclick = function(){ //判断是否为克隆的第一张图，是的话，修改ul的值，显示真正的第一张图 if(index === count){ ul.style.left = '0px'; index = 0; } index++; //总共有5张图片，但还有一张克隆的图，克隆的图片索引5 if(index < count){ // animate(ul, -index * imageWidth); //click();可触发按钮点击事件!!! ol.children[index].click(); } else if(index === count){ //如果索引为5，则以动画方式，移动到克隆的图片 animate(ul,-index * imageWidth); for(var i = 0; i < ol.children.length; i++){ ol.children[i].className = ''; } ol.children[0].className = 'current'; } } arr_r.onclick = function(){ //如果是第一张图片，此时要偷偷切换到最后一张图片（克隆的第一张图片） if(index === 0){ index = count; ul.style.left = -index * imageWidth + 'px'; } index--; ol.children[index].click(); } //3.实现无缝滚动 //获取第一个li var firstli = ul.children[0]; //克隆 li var cloneli = firstli.cloneNode(true); ul.appendChild(cloneli); //4.实现轮播图自动播放 //自动播放引用箭头点击功能，箭头点击切换引用序号点击，序号点击引用LiClick函数。 timeId = setInterval(function(){ arr_l.click(); },2000); </script> </body> </html>