无缝衔接轮播图——原生JS实现

原理就不讲了，太麻烦了，大致原理就是两扇推拉门，始终保持推拉门处于开启-闭合状态，大致就这样吧，原理很简单，只是说实现比较麻烦，一直想要实现这样的效果，奈何水平不够，也没那么多的时间来研究，趁最近有点闲时，就研究了一下，在部分浏览器上面可能存在一定的加载闪烁，下面是效果图（图片为网图，侵权即删）：

接下来就是源码了，想要明白原理的就自己看代码吧，注释也不想写了，不想明白原理的可以直接拿来用，其他的特效可以自己看着加，这里只是一个简单的demo，提供一种实现无缝轮播的思路，毕竟transition属性定义了就无法干掉：

HTML

<div class="wrap"><ul class="one"><li class="list"><img src="images/1.jpg" alt=""></li><li class="list"><img src="images/2.jpg" alt=""></li></ul><ul class="two"><li class="list"><img src="images/3.jpg" alt=""></li><li class="list"><img src="images/4.jpg" alt=""></li></ul></div><div class="to-left" onclick="toLeft()"><</div><div class="to-right" onclick="toRight()">></div>

CSS

* {padding: 0;margin: 0;}ul {list-style: none;}img {height: 600px;width: 1200px;}.wrap {height: 600px;width: 1200px;overflow: hidden;margin: 50px auto;position: relative;}.one, .two {height: 600px;width: 2400px;position: absolute;top: 0;transition: left 1s;}.list {float: left;}.to-left, .to-right {height: 40px;width: 40px;text-align: center;line-height: 40px;background-color: black;color: white;float: left;margin: 2px 20px;cursor: pointer;}

JavaScript

var list = document.getElementsByClassName("list");var one = document.getElementsByClassName("one")[0];var two = document.getElementsByClassName("two")[0];var status = "right";var change_flag = 0,changing_flag = false;var imgs = ["H:/images/1.jpg", "H:/images/2.jpg", "H:/images/3.jpg", "H:/images/4.jpg"];var img_flag1 = imgs.length - 1, img_flag2 = 0;list[0].getElementsByTagName("img")[0].src = imgs[img_flag1];list[1].getElementsByTagName("img")[0].src = imgs[(img_flag1 + 1) % imgs.length];list[2].getElementsByTagName("img")[0].src = imgs[img_flag2];list[3].getElementsByTagName("img")[0].src = imgs[(img_flag2 + 1) % imgs.length];one.style.opacity = 1;two.style.opacity = 0;one.style.left = "-1200px";two.style.left = 0;function toLeft() {if(changing_flag) {return; }toChange("left");changing_flag = true;setTimeout(() => {changing_flag = false;}, 1000);imgLoad(-2);}function toRight() {if(changing_flag) {return; }changing_flag = true;setTimeout(() => {changing_flag = false;}, 1000);toChange("right");imgLoad(2);}function toChange(direction) {if(status != direction) {one.style.opacity = two.style.opacity == 0 ? 0 : 1;two.style.opacity = two.style.opacity == 0 ? 1 : 0;change_flag = ++ change_flag % 2;}status = direction;two.style.opacity = one.style.opacity == 0 ? 0 : 1;one.style.opacity = one.style.opacity == 0 ? 1 : 0;two.style.left = one.style.left == "-1200px" ? "-1200px" : 0;one.style.left = one.style.left == "-1200px" ? 0 : "-1200px";}function imgLoad(num) {list[0].getElementsByTagName("img")[0].src = imgs[img_flag1];list[1].getElementsByTagName("img")[0].src = imgs[(img_flag1 + 1) % imgs.length];list[2].getElementsByTagName("img")[0].src = imgs[img_flag2];list[3].getElementsByTagName("img")[0].src = imgs[(img_flag2 + 1) % imgs.length];if(!change_flag) {img_flag1 = (img_flag1 + imgs.length + num) % imgs.length;}else {img_flag2 = (img_flag2 + imgs.length + num) % imgs.length;}change_flag = ++ change_flag % 2;}

学习分享，一起成长！以上为小编的经验分享，若存在不当之处，请批评指正！