史上最简单的无缝衔接轮播图

网上有大量关于使用原生js编写轮播图的例子，不得不说，他们的文章很棒，但是我发现一个缺点，就是他们的轮播图组件太过于完整，添加了很多按钮功能，代码量较大。掩盖了轮播图的最基本也是最重要的实现原理，很容易让新手摸不着头脑。

这篇文章的目的就是想用最少的代码，来讲解轮播图的实现原理，实现最基本的功能。等你学会了轮播图的实现后，至于之后怎么丰富轮播图，就是小菜一碟了

效果

思路

将图片放入列表中，使用CSS浮动使其排成一行，实现无缝衔接。外层为显示框，设置overflow属性使其只能显示一张图片。通过左移或右移整个列表达到图片滑动的效果。利用定时器实现自动轮播。

代码

html
代码很简单，一个div里面是个列表，每张图片都是一个列表项。本例为一个3张图片的轮播图，但你仔细看列表，会发现却有5个列表项，这是为什么呢？这是因为为了实现无缝衔接，防止出现滑动空白而特意设置的，在头部和尾部分别插入了最后一张图片和第一张图片，所以最后有3+2=5个列表项。

<body>
    <div id="box">
        <ul id="pic_list">
            <li class="item"><img class="pic" src="./3.jpg" /></li>
            <li class="item"><img class="pic" src="./1.jpg" /></li>
            <li class="item"><img class="pic" src="./2.jpg" /></li>
            <li class="item"><img class="pic" src="./3.jpg" /></li>
            <li class="item"><img class="pic" src="./1.jpg" /></li>
        </ul>
    </div>
    <div class="btn">
        <button id="prev">前一张</button>
        <button id="next">后一张</button>
    </div>
    <script src="main.js"></script>
</body>

css
样式中值得注意的是，外部div的宽度和高度要和图片一致，且必须设置其overflow:hidden属性，使其始终显示一张图片。列表项的float属性，使图片排成一行，而ul列表的宽度为500%正好对应于5张图片。

#pic_list{
    list-style: none;
    height: 300px;
    width: 500%;
    padding: 0;
    margin: 0;
    position: relative;
    top:0;
}

.pic{
    width: 400px;
    height:300px;
    padding: 0;
    margin: 0;
}

.item{
    float: left;
}

#box{
    width: 400px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid black;
    position: relative;
}
.btn{
    margin: 10px auto;
    width: 150px;
}

js

const images = document.getElementById('pic_list'); //获取列表
let index = 1; //当前显示图片的索引
let length = document.getElementsByClassName('pic').length -2;  //获取图片的真实数量，不包括头尾插入的图片
var animateTimeId = null, toggleTimeId = null; //两个用于setInterval方法的Id变量
var distance = 0;  //页面滑动的距离

//初始化时，显示第一张图片，将列表左移400px
images.style.left = "-400px";

//核心代码 页面滑动动画
function animate(direction){
    if (! animateTimeId){  //当页面正在执行动画时，不能再触发动画
        const step = direction === 1 ? -10 : 10;  //确定向左滑还是向右滑
        animateTimeId = setInterval(function(){  
            distance += Math.abs(step);
            images.style.left = (parseInt(images.style.left) + step) + 'px';  //每次增加或减少一定值
            if (distance >= 400 ) { //当页面滑动的距离等于或大于图片的宽度时
                clearInterval(animateTimeId); //停止动画
                animateTimeId = null;
                distance = 0; 
                if (step < 0){  //计算滑动后页面的索引
                    index += 1;
                }else{
                    index -= 1;
                }
                if (index === 0){  //如果已滑到列表头部
                    index = length;
                    images.style.left = length * (-400) + 'px';  //将列表左移
                }else if (index === 4){  //如果已滑到列表尾部
                    index = 1;
                    images.style.left = '-400px'; //将列表右移
                }
            }
        }, 15);
    }
}

function Init(){ //初始化，绑定按钮事件，并启动自动轮播
    const nextButton = document.getElementById('next');
    const prevButton = document.getElementById('prev');
    const box = document.getElementById('box');

    nextButton.onclick = function(){
        animate(1);
    };
    
    prevButton.onclick = function(){
        animate(2);
    };

    box.addEventListener('mouseenter', function(){
        clearInterval(toggleTimeId);
        toggleTimeId = null;
    });
    
    box.addEventListener('mouseleave', function(){
        toggleTimeId = setInterval(function(){
            animate(1);
        },2500);
    });

    toggleTimeId = setInterval(function(){
        animate(1);
    },2500);
}

Init();

---

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！