function $(id) { return document.getElementById(id); } //封装运动函数 function animate(ele,target) { //开始要清除定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //先获得该目标位置的偏移量 var current = ele.offsetLeft; //设置每次移动的像素 var step =730; step = current<target?step:-step; //当前的目标位置小于目标值时，这时步数为正 current += step; //当前移动的距离 if(Math.abs(target-current)>Math.abs(step)){ ele.style.left = current+'px';//当目标值与移动的距离大于步数的距离时，说明还有一段距离 } else{ clearInterval(ele.timer);//否则就已经到了，清除定时器 ele.style.left = target+'px';//就直接让他到目标值 } },20) } var oBox = $('box'); var inner = oBox.children[0]; var ulObj = inner.children[0];// var spanObj = inner.children[1].children; //获取所有的span标签 var imgWidth = inner.offsetWidth; var foucslr = $('foucslr'); var left = $('left'); var right = $('right'); //为小按钮做点击事件 for(var i=0;i<spanObj.length;i++){ //在事件触发之前先获取索引 spanObj[i].setAttribute('index',i); spanObj[i].onclick = function () { //先去除之前的样式 for(var i=0;i<spanObj.length;i++){ //spanObj[0].className = ''; //这样也是去除样式 spanObj[i].removeAttribute('class'); } this.className = 'current'; //获取按钮的索引 var index = this.getAttribute('index'); //获得当前对象的索引 animate(ulObj,-index*imgWidth); console.log(index); console.log(imgWidth*index) } } //自动轮播 var timer = setInterval(rightMove,1000); //显示与隐藏左右箭头 oBox.onmouseover = function () { foucslr.style.display = 'block'; clearInterval(timer);//停止自动播放 } oBox.onmouseout = function () { foucslr.style.display = 'none'; timer = setInterval(rightMove,1000) }; ulObj.appendChild(ulObj.children[0].cloneNode(true));//把第一张图片进行复制一份 //右边按钮点击 var pic = 0; right.onclick = rightMove; //右边移动按钮 function rightMove() { if(pic === ulObj.children.length-1){ //如果图片到了最后一张，就把他置为第一张 pic = 0; ulObj.style.left = 0+'px'; //图片也置为第一张 } pic++; animate(ulObj,-imgWidth*pic); //在进行控制按钮，当图片进行移动时，按钮这个时候也得跟着动 if(pic === ulObj.children.length-1){ //第五个颜色应该去除 spanObj[spanObj.length-1].className = ''; //第一个按钮颜色设置上 spanObj[0].className = 'current' }else { //如果不是最后一张，一并去除样式,然后再添加样式 //去除所有的按钮样式 for(var i=0;i<spanObj.length;i++){ spanObj[i].removeAttribute('class'); } spanObj[pic].className = 'current'; } } //左边按钮 left.onclick = leftMove; //左边移动按钮 function leftMove() { if(pic === 0){ //如果是第一张图片时，往左移动时马上变为第6张图片 //图片总共有七张，往左边一点，这个时候出现的时第7张图片，但是索引为6 pic = 6; //第6张图片 console.log(pic); ulObj.style.left = -pic*imgWidth+'px' } pic--; animate(ulObj,-imgWidth*pic); console.log(pic); //设置小按钮颜色，先去除按钮样式 for(var i =0;i<spanObj.length;i++){ spanObj[i].removeAttribute('class'); } //对当前样式进行设置 spanObj[pic].className = 'current'; } //自动轮播 //HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完整的轮播图</title> <style> *{ margin: 0; padding: 0; } .box{ width: 730px; height: 454px; margin: 100px auto; position: relative; } .inner{ width:730px ; height: 454px; overflow: hidden; position: relative; } ul{ list-style-type: none; } .inner ul{ width: 1000%; position: absolute; top: 0; left: 0; } .inner li{ float: left; } .square{ position: absolute; right: 10px; bottom: 10px; } .square span{ width: 16px; height: 16px; background-color: #ffffff; display: inline-block; text-align: center; line-height: 16px; cursor: pointer; } .square span.current{ background-color: orange; color: #ffffff; } #foucslr{ display: none; } #foucslr span{ width: 40px; height: 40px; line-height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background-color: #000000; text-align: center; color: #ffffff; font-size: 30px; cursor: pointer; border: 1px solid #cccccc; opacity: 0.3; } #foucslr #right{ right: 5px; left: auto; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <ul> <li><img src="../img1/images/1.jpg" alt="" width="730" height="454"></li> <li><img src="../img1/images/2.jpg" alt=""></li> <li><img src="../img1/images/3.jpg" alt=""></li> <li><img src="../img1/images/4.jpg" alt=""></li> <li><img src="../img1/images/5.jpg" alt=""></li> <li><img src="../img1/images/6.jpg" alt=""></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </div> <div id="foucslr"> <span id="left"><</span> <span id="right">></span> </div> </div> <script src="完整的轮播图.js"></script> </body> </html> 文章来源: 完整轮播图