最近写了一个轮播图给大家借鉴一下，话不多说，上干货
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>轮播图</title> <style> *{ padding:0px; margin: 0px; list-style:none; } .start{ position:relative; height: 250px; width: 400px; margin:100px auto 0px; border:2px solid black; overflow: hidden; } .start .start1{ height:250px; width:2000px; position: absolute; left:0px; top:0px; } .start .start1 li{ float:left; height:250px; width:400px; } .start .start1 li img{ width:100%; height: 100%; } .start .btn { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; color: #fff; background-color: #000; text-align: center; line-height: 40px; opacity: 0.1; cursor: pointer; } .start:hover .btn { opacity: 0.7; } .start .leftbtn { left: 15px; } .start .rightbtn { right: 15px; } .start .end { position: absolute; width: 100%; bottom: 15px; text-align: center; } .start .end span { display: inline-block; width: 15px; height: 6px; background-color: #ccc; margin-right: 10px; cursor: pointer; } .start .end .active { background-color: #f40; } </style> </head> <body> <div class="start"> <ul class="start1"> <li> <img src="./cat1.jpg"/> </li> <li> <img src="./cat2.jpg"/> </li> <li> <img src="./cat3.jpg"/> </li> <li> <img src="./cat4.jpg"/> **图片的话自己可以修改哈，还有位置。** </li> <li> <img src="./cat1.jpg"/> </li> </ul> <div class="btn leftbtn"><</div> <div class="btn rightbtn">></div> <div class="end"> <span class="active"></span> <span></span> <span></span> <span></span> </div> </div> **这个外部引用的js文件下面会给出** <script src='./move.js'></script> <script> var timer = null; var sliderPage = document.getElementsByClassName('start1')[0]; var moveWidth = sliderPage.children[0].offsetWidth; var num = sliderPage.children.length - 1; var leftBtn = document.getElementsByClassName('leftbtn')[0]; var rightBtn = document.getElementsByClassName('rightbtn')[0]; var oSpanArray = document.getElementsByClassName('end')[0].getElementsByTagName('span'); var lock = true; var index = 0; leftBtn.onclick = function () { autoMove('right->left'); } rightBtn.onclick = function () { autoMove('left->right'); } **这个部分是按钮** for (var i = 0; i < oSpanArray.length; i++) { (function (myIndex) { oSpanArray[i].onclick = function () { lock = false; clearTimeout(timer); index = myIndex; startMove(sliderPage, {left: - index * moveWidth}, function () { lock = true; timer = setTimeout(autoMove, 1500); changeIndex(index); }) } })(i) } **上面这部分是让索引可以点击跳转图片** function autoMove (direction) { **加lock是为了让你点击按钮快速的时候不出错** if (lock) { lock = false; clearTimeout(timer); **默认方向为向左** if (!direction || direction == 'left->right') { index++; **startMove（）是一个外部的js文件的函数下面会给大家** startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function () { if (sliderPage.offsetLeft == - num * moveWidth) { index = 0; sliderPage.style.left = '0px'; } timer = setTimeout(autoMove, 1500); lock = true; changeIndex(index); }); }else if (direction == 'right->left') { if (sliderPage.offsetLeft == 0) { sliderPage.style.left = - num * moveWidth + 'px'; index = num; } index--; startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () { timer = setTimeout(autoMove, 1500); lock = true; changeIndex(index); }) } } } **这个是让索引按第几个图片动** function changeIndex (_index) { for (var i = 0; i < oSpanArray.length; i++) { oSpanArray[i].className = ''; } oSpanArray[_index].className = 'active'; } timer = setTimeout(autoMove, 1500); </script> </body> </html> **这个是外部的js文件，是一个让图片运动的文件** function getStyle (obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, false)[attr]; } } // object是dom（元素），data是对象，function是函数传方法 function startMove (obj, data, func) { clearInterval(obj.timer); var iSpeed; var iCur; var name; startTimer = obj.timer = setInterval(function () { var bStop = true; for (var attr in data) { if (attr === 'opacity') { name = attr; iCur = parseFloat(getStyle(obj, attr)) * 100; }else { iCur = parseInt(getStyle(obj, attr)); } iSpeed = ( data[attr] - iCur) / 8; if (iSpeed > 0) { iSpeed = Math.ceil(iSpeed); }else { iSpeed = Math.floor(iSpeed); } if (attr === 'opacity') { obj.style.opacity = ( iCur + iSpeed ) / 100; }else { obj.style[attr] = iCur + iSpeed + 'px'; } if ( Math.floor(Math.abs(data[attr] - iCur)) != 0 ) { bStop = false; } } if (bStop) { clearInterval(obj.timer); if (name === 'opacity') { obj.style.opacity = data[name] / 100; } func(); } },30); }希望大家可以点点关注，多多评论。谢谢啦！
