JS写无缝轮播（干货！）_js无缝轮播-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41174502/article/details/106325008

无缝轮播的主要思路是：

当前显示图片（1，2，3，4，5）为最后一张（5）且右按钮被点击时，在5后面接一张1（1，2，3，4，5，1）以保证图片位移方向的一致性，然后以0s的transform速度回到第1张（index:0）,即在用户视觉查看不到的速度内换掉最后一张1（index:5）。当显示图片为第一张且左按钮被点击的时候，也是一样的道理，在1前面接一张5（5，1，2，3，4，5，1），然后在0秒内回到第五张（index:5）。

效果演示：https://www.bilibili.com/video/BV1EQ4y1P7Th

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝轮播</title>
    <meta name="author" content="marinerzp">
    <style>
        ul,li{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        #main{
            width: 800px;
            height: 500px;
            background-color: aqua;
            margin: 30px auto;
            position: relative;
            overflow: hidden;
        }
        ul{
            width: 800px;
            height: 70px;
            background-color: #15191a;
            color: white;
            position: absolute;
            bottom: 0;
        }
        li{
            width: 160px;
            height: 100%;
            float: left;
            line-height: 70px;
            text-align: center;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
            transition: all .2s linear;
        }
        li.ck{
            background-color: royalblue;
            color: yellowgreen;
        }
        
        .left{
            position: absolute;
            top: 210px;

        }
        .right{
            position: absolute;
            top: 210px;
            right: 0;
        }
        .left,.right{
            width: 20px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            font-size: 20px;
            color: white;
        }
        .left:hover,.right:hover{
            background-color: rgb(34, 30, 30);
        }
        #top{
            height: 430px;
            width: 5600px;
            background-color: rebeccapurple;
            position: absolute;
            left: -800px;
            transition: all .3s linear;
        }
        #top a{
            display: block;
            float: left;
            width: 800px;
            height: 100%;
        }
        img{
            width: 100%;
            height: 100%;
            background-color: rgb(42, 42, 109,.1);
        }
        
    </style>
</head>
<body>
    <div id="main">
        <div id="top">
            <a href="">
                <img src="images/5.jpg" alt="">
            </a>
            <a href="">
                <img src="images/1.jpg" alt="">
            </a>
            <a href="">
                <img src="images/2.jpg" alt="">
            </a>
            <a href="">
                <img src="images/3.jpg" alt="">
            </a>
            <a href="">
                <img src="images/4.jpg" alt="">
            </a>
            <a href="">
                <img src="images/5.jpg" alt="">
            </a>
            <a href="">
                <img src="images/1.jpg" alt="">
            </a>
        </div>
        <ul>
            <li class="content ck" >宫崎骏1</li>
            <li class="content">宫崎骏2</li>
            <li class="content">宫崎骏3</li>
            <li class="content">宫崎骏4</li>
            <li class="content">宫崎骏5</li>
        </ul>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        
    </div>
    <script>
        let Acontent=document.querySelectorAll('.content');
        let Omain=document.getElementById('main');
        let Oleft=document.querySelector('.left');
        let Oright=document.querySelector('.right');
        let Otop=document.querySelector('#top');
        let len=Acontent.length;
        let cur=0;//定义变量，用来表示当前被选中的li:下标

        function change(x,flag){
            Otop.style.transition='all .3s linear';
            if (cur===len-1&&flag===true) {
                Acontent[cur].classList.toggle('ck');
                Otop.style.left=`-4800px`;
                cur=x;
                Acontent[cur].classList.toggle('ck');
                setTimeout(()=>{//动画0.3s，设定在0.5s之后，瞬间让它回去
                    Otop.style.transition='all 0s';
                    Otop.style.left='-800px';
                },500);
            }
            else if(cur===0&&flag===false){
                Acontent[cur].classList.toggle('ck');
                Otop.style.left=`0px`;
                cur=x;
                Acontent[cur].classList.toggle('ck');
                setTimeout(()=>{//动画0.3s，设定在0.5s之后，瞬间让它回去
                    Otop.style.transition='all 0s';
                    Otop.style.left='-4000px';
                },500);
            }
            else{
                Acontent[cur].classList.toggle('ck');
                Otop.style.left=`${-(x+1)*800}px`;
                cur=x;
                Acontent[cur].classList.toggle('ck');
            }
           
        }
        //设置自动轮播
        let banner=setInterval(()=>change((cur+1)%len,true),3000);

        //鼠标移入清除自动轮播
        Omain.onmouseenter=function(){
            clearInterval(banner);   
        }
        //鼠标移出恢复自动轮播
        Omain.onmouseleave=function(){
            banner=setInterval(()=>change((cur+1)%len,true),3000);
        }
        
        Acontent.forEach(function(node,i){
            node.onclick=function(){
                if(cur===i)return;//判断是否重复被选中
                change(i);
            }
        });

        Oleft.onclick=function(){
            change((cur-1+len)%len,false);//(cur-1+5)%5
        }
        Oright.onclick=function(){
            change((cur+1)%len,true)
        }
    </script>
</body>
</html>