快乐玩前端：无缝衔接轮播图——原生JS实现

无缝衔接轮播图——原生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;
}

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