利用原生的js实现轮播图，可以添加到自己的UI库中，在以后的项目中对其进行修改然后添加到已有项目中。
先写出css部分和html部分，直接上代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3</title></head><style>* {padding: 0;margin: 0;list-style: none;border: 0;}.all {position: relative;width: 500px;height: 200px;border: 1px solid black;padding: 7px;margin: 100px auto;}.silder {overflow: hidden;width: 500px;height: 200px;position: relative;}.silder ul {position: absolute;top: 0;width: 3000px;height: 200px;}.silder li {height: 200px;float: left;}.silder ol {position: absolute;bottom: 5px;right: 20px;height: 20px;}.silder ol li {margin: 0 5px;background: #fff;line-height: 20px;width: 20px;height: 20px;text-align: center;}.current {background: yellow !important;}.arr span{width: 40px;height: 40px;position: absolute;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;}.left{left: 5px;}.right{right: 5px;}</style><body><div class="all"><div class="silder" id="silder"><ul><li><img src="./img/1.jpg" width="500" height="200"/></li><li><img src="./img/2.jpg" width="500" height="200"/></li><li><img src="./img/3.jpg" width="500" height="200"/></li></ul><ol></ol><div class="arr"><span class="left"><</span><span class="right">></span></div></div></div></body><script></script></html>
轮播图的主体思想：设置了ul的position为absolute，然后通过改变left，拉动图片在silder框中显示不同的内容
轮播图步骤分解
1、最简单的轮播图，是图片1、2、3定时更换，那么我们实现
图片1——>图片2——>图片3——>图片1
我们在script标签加入以下代码
window.onload=function () {var silder=document.getElementById('silder')var ul=silder.children[0]var imgWidth=silder.offsetWidthvar key=0;setInterval(function () {key++if(key>ul.children.length-1){key=0;}ul.style.left=-key*imgWidth+'px'},1000)}
这样子的是一个独立更换图片的轮播图，如果我们想要丝滑地更换图片，如下
2、丝滑地切换图片
想要丝滑地切换图片，主要思想：设置定时器，一点点移动图片（ul的绝对定位位置即left属性）直到移动到最后的定位位置，取消定时器
问题：那么最后一张图片和第一张，怎么连接起来呢？
解决：在最后一张放上第一张图片，然后内部偷梁换柱定位到之前即可
window.onload=function () {var silder=document.getElementById('silder')var ul=silder.children[0]var imgWidth=silder.offsetWidthvar key=0;// 添加第一张图到最后ul.appendChild(ul.children[0].cloneNode(true))setInterval(function () {key++var innerTimer;var speed=-10;// 切换图片时每次移动距离innerTimer=setInterval(function () {//距离目标还需移动distance pxvar distance=Math.abs(key*imgWidth)-Math.abs(ul.offsetLeft)// 如果distance距离目的地不够再微移一次，则停止微移if(distance<Math.abs(speed)){clearInterval(innerTimer)ul.style.left=-key*imgWidth+'px'if(key===ul.children.length-1){//如果是从最后一张图开始移动，则偷梁换柱到第一张图key = 0;ul.style.left=0}}else{ul.style.left=ul.offsetLeft+speed+'px'}},10)},1000)}
3、添加图片的数字导航及鼠标移入停止轮播
代码如下
var silder = document.getElementById('silder')var ul = silder.children[0]var imgWidth = silder.offsetWidthvar ol = silder.children[1]var globalTimer, key = 0;window.onload = function () {for (var i = 0, len = ul.children.length; i < len; i++) {var newLi = document.createElement('li')const index = i// 给数字下标设置鼠标移入事件，若newLi.onmouseover = function () {// 取消轮播定时器，clearInterval(globalTimer)setLiCurrent(index)key = index;animate(-key*imgWidth)};newLi.innerHTML = i + 1;ol.appendChild(newLi)}// 初始化选中的下标setLiCurrent(0)// 添加第一张图到最后ul.appendChild(ul.children[0].cloneNode(true))// 播放轮播图globalTimer = setInterval(autoPlay, 1000)silder.onmouseover = function () {clearInterval(globalTimer)}silder.onmouseout = function () {globalTimer = setInterval(autoPlay, 1000)}}function setLiCurrent(index) {for (var i = 0, len = ol.children.length; i < len; i++) {ol.children[i].className = ''}ol.children[index].className = 'current'}var ulTimerfunction animate(goal) {clearInterval(ulTimer)var distance = goal - ul.offsetLeft;const speed = distance > 0 ? 10 : -10ulTimer = setInterval(function () {if (Math.abs(goal - ul.offsetLeft) >= Math.abs(speed)) {ul.style.left = ul.offsetLeft + speed + 'px'} else {ul.style.left = goal}}, 10)}function autoPlay() {key++if(key>ul.children.length-1){ul.style.left=0key=1;}animate(-key*imgWidth)setLiCurrent(key>ol.children.length-1?0:key)}
4、添加左右滑动按钮
代码如下
var silder = document.getElementById('silder')var ul = silder.children[0]var imgWidth = silder.offsetWidthvar ol = silder.children[1]var silder_btn = silder.children[2]var globalTimer, key = 0;window.onload = function () {for (var i = 0, len = ul.children.length; i < len; i++) {var newLi = document.createElement('li')const index = i// 给数字下标设置鼠标移入事件，若newLi.onmouseover = function () {// 取消轮播定时器，clearInterval(globalTimer)setLiCurrent(index)key = index;animate(-key * imgWidth)};newLi.innerHTML = i + 1;ol.appendChild(newLi)}// 初始化选中的下标setLiCurrent(0)// 对滑动按钮进行点击事件注册silder_btn.children[0].onclick = function () {console.log(key)key = key - 1 >= 0 ? key - 1 : 0animate(-key * imgWidth)setLiCurrent(key)}silder_btn.children[1].onclick = function () {console.log(key)key = key + 1 >= ol.children.length-1?ol.children.length-1: key + 1animate(-key * imgWidth)setLiCurrent(key)}// 添加第一张图到最后ul.appendChild(ul.children[0].cloneNode(true))// 播放轮播图globalTimer = setInterval(autoPlay, 1000)silder.onmouseover = function () {clearInterval(globalTimer)setSilderBtn('block')}silder.onmouseout = function () {globalTimer = setInterval(autoPlay, 1000)setSilderBtn('none')}}function setLiCurrent(index) {for (var i = 0, len = ol.children.length; i < len; i++) {ol.children[i].className = ''}ol.children[index].className = 'current'}var ulTimerfunction animate(goal) {clearInterval(ulTimer)var distance = goal - ul.offsetLeft;const speed = distance > 0 ? 10 : -10ulTimer = setInterval(function () {if (Math.abs(goal - ul.offsetLeft) >= Math.abs(speed)) {ul.style.left = ul.offsetLeft + speed + 'px'} else {ul.style.left = goal}}, 10)}function autoPlay() {key++if (key > ul.children.length - 1) {ul.style.left = 0key = 1;}animate(-key * imgWidth)setLiCurrent(key > ol.children.length - 1 ? 0 : key)}function setSilderBtn(option) {for (var i = 0, len = silder_btn.children.length; i < len; i++) {silder_btn.children[i].style.display = option}}
