原生JS实现无缝轮播图案例

运动插件
function animove(obj,distance,speed,callback) { //调用的变量  目标距离  速度   回调函数
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            let step = (distance - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == distance) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        },speed)
}

CSS代码
 * {
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height: 460px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .pic-box {
            width: 4904px;
            position: absolute;
        }
        .pic-box > li {
            float: left;
        }
        .point {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .point > li {
            float: left;
            width: 8px;
            height: 8px;
            border: 1px solid blueviolet;
            margin: 0 4px;
            border-radius: 50%;
        }
        .point > .active {
            background-color: orange;
        }
        .left-btn,
        .right-btn {
            width: 50px;
            height: 40px;
            background-color: rgba(0,0,0,.5);
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: white;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .left-btn {
            left: 0;
        }
        .right-btn {
            right: 0;
        }

HTML代码
"box">
        
"pic-box">
            

                "lb.webp" alt="">
            
            

                "lb2.webp" alt="">
            
            

                "pic3.jpg" alt="">
            
        
        
"point">
        
        
"left-btn"><
        
"right-btn">>
    
    

js代码
let picbox = document.querySelector('.pic-box');
        let pic = document.querySelectorAll('.pic-box > li'); //由于获取的不是动态的 所以之后的克隆 并不会使这个变量发生改变
        let point = document.querySelector('.point');
        let leftbtn = document.querySelector('.left-btn');
        let rightbtn = document.querySelector('.right-btn');
        let carouselindex = 0;
        //通过for循环 生成小圆点 并将圆点添加到ul里
        for (let i = 0; i < pic.length; i ++) {
            let pointli = document.createElement('li');
            pointli.classList.add(i);
            point.appendChild(pointli);
        }
        //给第一个小圆点默认添加active
        point.children[0].classList.add('active');

        //克隆第一个图片 深度
        let kelon = picbox.children[0].cloneNode(true);
        picbox.appendChild(kelon); //将图片添加到最后位置

        //获取所以圆点
        let pointli = document.getElementsByClassName('point')[0].getElementsByTagName('li');

        //轮播方法
        function carousel(index) {
            let distance = (-index * pic[0].offsetWidth); //计算行走的距离  图片的index值乘以图片的大小
            animove(picbox,distance,10); //调用运动函数
            for (let i = 0; i < pointli.length; i ++) {   //for循环移除每个小点的选中状态
                pointli[i].classList.remove('active');
            }
            if (index != pic.length) { //如果不等于pic的长度 就执行
                pointli[index].classList.add('active');
            } else { //如果索引值为3 说明此时图片为克隆的图 而圆点的最大索引值为2  将第一个圆点设置为active即可正常显示圆点状态
                point.children[0].classList.add('active');
            }
        }
        Array.prototype.forEach.call(pointli,function (item,index) { //给每个圆点添加点击事件
                item.addEventListener('click',function () {
                    carouselindex = index;          //将点击的索引值赋值给轮播索引全局变量
                    carousel(carouselindex);
                })
        });
        rightbtn.addEventListener('click',function () { //右边点击事件
                carouselindex ++;   //每次点击全局轮播索引增加
                if (carouselindex > pic.length) {       //如果索引大于图片数量   由于数量大小获取的是静态的 所以长度不会因为克隆变化而变化
                    picbox.style.left = "0px";    //如果大于索引说明此时要离开克隆的那张图 此时迅速将left值设置为0
                    carouselindex = 1;      //然后将索引设置为1
                }
                carousel(carouselindex); //这时候就在left为0的位置 过渡到索引1的位置  实现无缝轮播的效果
        });
        leftbtn.addEventListener('click',function () { //左边点击事件
            carouselindex --;   //减减
            if (carouselindex < 0) {        //如果索引值小于0
                carouselindex = 2;   //将索引值设置为2
                picbox.style.left = "-3678px"; //将位置迅速变换为第四张图的位置（克隆的图）
            }
            carousel(carouselindex); //由克隆的图过渡到索引为2的图（第三张图）
        })