最近刚好重新看了一下前端的内容，在做网页banner的时候实现轮播图上遇到了问题。
本着不想用轮子的心态，在网上查了半天很多实现有点问题（逼死强迫症
于是对着淘宝和京东首页两种不同的轮播图做了一个实现。
为了实现无限循环，在第一张图前放一个最后一张图，最后一张图后面放一个第一张图
<li><img src="image3.jpg" alt=""></li> <li><img src="image1.jpg" alt=""></li> <li><img src="image2.jpg" alt=""></li> <li><img src="image3.jpg" alt=""></li> <li><img src="image1.jpg" alt=""></li>不用left来做，用translate3d来做，虽然不知道为什么，但是确实很丝滑，而且也解决了快速点击的时候多事件冲突的问题
逻辑链如下：
| DIV | position |
|---|---|
| .banner 总的div | 相对布局 |
| .screen 放图像的 | 相对布局 |
| .dot 圆点 | 绝对布局 |
| .arr 箭头 | 绝对布局 |
<!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>Document</title> <link rel="stylesheet" type="text/css" href="lbt_tb.css" /> <script src="lbt_tb.js"> </script></head><body> <div class="banner" id ="banner"> <div class="screen"> <ul id="img" style="transform: translate3d(-700px,0px,0px) ;transition-duration: 0.3s;"> <li><img src="image3.jpg" alt=""></li> <li><img src="image1.jpg" alt=""></li> <li><img src="image2.jpg" alt=""></li> <li><img src="image3.jpg" alt=""></li> <li><img src="image1.jpg" alt=""></li> </ul> </div> <div class="dot"> <ul id="circles"> <li class="active"></li> <li></li> <li></li> </ul> </div> <div class="leftArr" id="left"> <</div> <div class="rightArr" id="right">> </div> </div></body></html>window.onload = function () { var step = -700; //步距 var banner = document.getElementById("banner"); var img = document.getElementById("img") var circles = document.getElementById("circles").children; var left = document.getElementById("left"); var right = document.getElementById("right"); var index = 0; var len = circles.length; var run; function turn() { run = setInterval(function () { circles[index].removeAttribute("class"); index++; move(index); console.log(index); if (index == len) { index = 0; } circles[index].className = "active"; console.log("change" + index); }, 4000); } //启动时，调用函数 turn(); // 设置鼠标移入时暂停 banner.onmouseenter = function () { //当鼠标移入容器中，停止轮播 clearInterval(run); } banner.onmouseleave = function () { //当鼠标移出容器时，继续开始轮播 turn(); } // 设置鼠标移到圆点上时候的事件 for (let i = 0; i < len; i++) { circles[i].onmouseenter = (function (i) { return function () { circles[index].removeAttribute("class"); index = i; move(index); circles[index].className = "active"; console.log("mouse circle change" + index); } })(i); } // 设置左箭头事件 left.onclick = function () { circles[index].removeAttribute("class"); index--; move(index); if (index < 0) { index = len - 1; } circles[index].className = "active"; console.log("left change" + index); } // 设置右箭头事件 right.onclick = function () { circles[index].removeAttribute("class"); index++; move(index); if (index == len) { index = 0; } circles[index].className = "active"; console.log("right change" + index); } function move(index) { img.style.transform = 'translate3d(' + (index + 1) * step + 'px,0px,0px)'; img.style.transitionDuration = '0.3s'; // 为了实现无限轮播的一些处理 if (index < 0) { setTimeout(function () { img.style.transitionDuration = '0s'; img.style.transform = 'translate3d(' + len * step + 'px,0px,0px)'; }, 300); } if (index == len) { setTimeout(function () { img.style.transitionDuration = '0s'; img.style.transform = 'translate3d(' + -700 + 'px,0px,0px)'; }, 300); } }}* { margin: 0px; padding: 0px; border: 0px;}div.banner { width: 700px; height: 420px; padding: 7px; position: relative; border: solid 1px gray;}.screen { width: 700px; height: 420px; overflow: hidden; position: relative;}.screen ul { position: absolute; top: 0px; width: 3500px;}.screen li { width: 700px; height: 420px; float: left; overflow: hidden;}img { height: 100%; width: 100%; z-index: 0;}.leftArr { cursor: pointer; width: 30px; height: 50px; position: absolute; top: 150px; left: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 50px;}.rightArr { cursor: pointer; width: 30px; height: 50px; position: absolute; top: 150px; right: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 50px;}.icon-dot { display: inline-block; width: 40px; height: 40px; background-color: #333; background-clip: content-box; padding: 8px; border-radius: 50%; border: 8px solid #333; z-index: 1000;}.dot { cursor: pointer; position: absolute; width: 93px; height: 30px; bottom: 7px; right: 300px; background-color: rgba(0, 0, 0, 0.3); border-radius: 15px;}.dot ul li { list-style: none; width: 15px; height: 15px; border-radius: 100%; background-color: #fff; float: left; margin: 7px 8px;}.dot ul li.active { transition: 0.5s; background-color: #fff; background-clip: content-box; padding: 2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #Fff; margin: 5px 6px;}
实现起来比第一种简单很多，页面布局稍有变化，不多赘述。
注：暂不实现渐变效果，具体实现见后续3
<body> <div class="banner" id="banner"> <div class="screen"> <ul id="imgs"> <li class="active"><img id="slide1" src="image1.jpg" alt=""></li> <li><img id="slide2" src="image2.jpg" alt=""></li> <li><img id="slide3" src="image3.jpg" alt=""></li> </ul> </div> <div class="dot"> <ul id="circles"> <li class="active"></li> <li></li> <li></li> </ul> </div> <div class="leftArr" id="left"> <</div> <div class="rightArr" id="right">> </div> </div></body>window.onload = function () { var banner = document.getElementById("banner"); var imgs = document.getElementById("imgs").children; var circles = document.getElementById("circles").children; var left = document.getElementById("left"); var right = document.getElementById("right"); var index = 0; var len = imgs.length; var run; console.log('onload'); function turn() { run = setInterval(function () { imgs[index].removeAttribute("class"); circles[index].removeAttribute("class"); index++; console.log(index); if (index == len) { index = 0; } imgs[index].className = "active"; circles[index].className = "active"; console.log("change" + index); }, 2000); } //启动时，调用函数 turn(); //设置鼠标移入移出容器事件 banner.onmouseenter = function () { //当鼠标移入容器中，停止轮播 clearInterval(run); } banner.onmouseleave = function () { //当鼠标移出容器时，继续开始轮播 turn(); } // 设置鼠标移到圆点上时候的事件 for (let i = 0; i < len; i++) { circles[i].onmouseenter = (function (i) { return function () { imgs[index].removeAttribute("class"); circles[index].removeAttribute("class"); index = i; imgs[index].className = "active"; circles[index].className = "active"; console.log("mouse circle change" + index); } })(i); } // 设置左箭头事件 left.onclick = function () { imgs[index].removeAttribute("class"); circles[index].removeAttribute("class"); index--; if(index<0){ index = len-1; } imgs[index].className = "active"; circles[index].className = "active"; console.log("left change" + index); } // 设置右箭头事件 right.onclick = function () { imgs[index].removeAttribute("class"); circles[index].removeAttribute("class"); index++; if(index==len){ index = 0; } imgs[index].className = "active"; circles[index].className = "active"; console.log("right change" + index); }}* { margin: 0px; padding: 0px; border: 0px;}div.banner { width: 700px; height: 420px; padding: 7px; position: relative; border: solid 1px gray;}.screen { width: 700px; height: 420px; overflow: hidden; position: relative;}.screen ul { position: absolute; top: 0px; left: 0px; width: 700px;}.screen li { width: 700px; height: 420px; float: left; display: none; overflow: hidden;}.screen li.active { display: block;}img { height: 100%; width: 100%; z-index: 0;}.leftArr { cursor: pointer; width: 30px; height: 50px; position: absolute; top: 150px; left: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 50px;}.rightArr { cursor: pointer; width: 30px; height: 50px; position: absolute; top: 150px; right: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 50px;}.icon-dot { display: inline-block; width: 40px; height: 40px; background-color: #333; background-clip: content-box; padding: 8px; border-radius: 50%; border: 8px solid #333; z-index: 1000;}.dot { cursor: pointer; position: absolute; width: 93px; height: 30px; bottom: 7px; right: 300px; background-color: rgba(0, 0, 0, 0.3); border-radius: 15px;}.dot ul li { list-style: none; width: 15px; height: 15px; border-radius: 100%; background-color: #fff; float: left; margin: 7px 8px;}.dot ul li.active { transition: 0.5s; background-color: #fff; background-clip: content-box; padding: 2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #Fff; margin: 5px 6px;}用JQ的fadeIn()实现，注意使用前要用加个stop()，不然在快速点几下会错乱
把CSS中的该段删去
.screen li.active { display: block;}把对HTML中的<body>进行修改
<li class="active"><img id="slide1" src="image1.jpg" alt=""></li>改为
<li style="display: block;"><img id="slide1" src="image1.jpg" alt=""></li>来使得一开始第一张图片会显示
引用JQ，分别替换JS中的
imgs[index].removeAttribute("class");imgs[index].className = "active";为
$("#imgs").find("li").hide();$("#imgs").find("li").eq(index).stop().fadeIn("1000");最终效果如图
HTML+JS代码
<!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>Document</title> <link rel="stylesheet" type="text/css" href="lbt_jd.css" /> <script src="jquery-3.4.1.min.js"></script> <script> window.onload = function () { var banner = document.getElementById("banner"); var imgs = document.getElementById("imgs").children; var circles = document.getElementById("circles").children; var left = document.getElementById("left"); var right = document.getElementById("right"); var index = 0; var len = imgs.length; var run; console.log('onload'); function turn() { run = setInterval(function () { var imgs = $("#imgs"); imgs.find("li").hide(); circles[index].removeAttribute("class"); index++; console.log(index); if (index == len) { index = 0; } imgs.find("li").eq(index).stop().fadeIn("1000"); circles[index].className = "active"; console.log("change" + index); }, 2000); } //启动时，调用函数 turn(); //设置鼠标移入移出容器事件 banner.onmouseenter = function () { //当鼠标移入容器中，停止轮播 clearInterval(run); } banner.onmouseleave = function () { //当鼠标移出容器时，继续开始轮播 turn(); } // 设置鼠标移到圆点上时候的事件 for (let i = 0; i < len; i++) { circles[i].onmouseenter = (function (i) { return function () { $("#imgs").find("li").hide(); circles[index].removeAttribute("class"); index = i; $("#imgs").find("li").eq(index).stop().fadeIn("1000"); circles[index].className = "active"; console.log("mouse circle change" + index); } })(i); } // 设置左箭头事件 left.onclick = function () { $("#imgs").find("li").hide(); circles[index].removeAttribute("class"); index--; if (index < 0) { index = len - 1; } $("#imgs").find("li").eq(index).stop().fadeIn("1000"); circles[index].className = "active"; console.log("left change" + index); } // 设置右箭头事件 right.onclick = function () { $("#imgs").find("li").hide(); circles[index].removeAttribute("class"); index++; if (index == len) { index = 0; } $("#imgs").find("li").eq(index).stop().fadeIn("1000"); circles[index].className = "active"; console.log("right change" + index); } }</script></head><body> <div class="banner" id="banner"> <div class="screen"> <ul id="imgs"> <li style="display: block;"><img id="slide1" src="image1.jpg" alt=""></li> <li><img id="slide2" src="image2.jpg" alt=""></li> <li><img id="slide3" src="image3.jpg" alt=""></li> </ul> </div> <div class="dot"> <ul id="circles"> <li class="active"></li> <li></li> <li></li> </ul> </div> <div class="leftArr" id="left"> <</div> <div class="rightArr" id="right">> </div> </div></body></html>
