无缝轮播

摘要：无缝轮播工作中遇到轮播怎么办千万不要自己写轮播我们学这么多基础是为了能够看懂大神的代码然后用大神的代码因为如果自己写一个轮播就可能出现各种各样的如果是在工作中这样做无异于浪费自己的时间降低工作效率最好的方法是直接用大神写好的源码然后看使用文

工作中遇到轮播怎么办?千万不要自己写轮播
我们学这么多基础是为了能够看懂大神的代码,然后用大神的代码
因为如果自己写,一个轮播,就可能出现各种各样的bug,如果是在工作中,这样做无异于浪费自己的时间,降低工作效率.最好的方法是直接用大神写好的源码,然后看使用文档.
可能是最厉害的轮播组件(预览与使用)
可能是最厉害的轮播组件(github)
当自己进行学习的时候,可以花时间去探索,造轮子,自己撸一遍.但是要分清工作和学习的不同状态

let $btns = $("#btns>button");
let $slides = $("#slides");
let current = 0;//当前图片元素的index值
let $imgs = $slides.children("img");

makeFakeImg();//克隆假的图片,并放到应有的位置上
$slides.css({transform:"translateX(-400px)",})//初始化第一张图片的位置
binEvent();//绑定按钮的监听事件

function binEvent() {//绑定按钮的监听事件
    $btns.eq(0).on("click",function () {
        if(current === 2){//如果我是从第三张图到第一张图的
            console.log("说明我是从下标为2的图(第三张)过来的")
            //那么我就先转移到假图,然后再瞬间转移到真图
            $slides.css({//先轮播到最后一张假图
                transform:"translateX(-1600px)",
            }).one("transitionend",function(){//必须在这个transitionend过渡执行结束在执行下面的代码,不然就一步就到-400px了,也没有过渡
                console.log("我变回了第一张真实的图")
                //套路:如果想让元素不执行过渡动画,那么就把他先hide了,在offset,在这中间写代码,最后再show出来,
                $slides.hide().offset();
                $slides.css({
                    transform:"translateX(-400px)",
                }).show();
            })
        }else {
            $slides.css({
                transform:"translateX(-400px)",
            })
        }
        current = 0;
    })
    $btns.eq(1).on("click",function () {
        $slides.css({
            transform:"translateX(-800px)",
        })
        current = 1;
    })
    $btns.eq(2).on("click",function () {
        if (current === 0){
            console.log("说明我是从下标为0的图(第一张)过来的")
            //赋值上面的代码
            $slides.css({
                transform:"translateX(0px)",
            }).one("transitionend",function(){
                console.log("我变回第3张真实的图")
                $slides.hide().offset();
                $slides.css({
                    transform:"translateX(-1200px)",
                }).show();
            })
        }else{
            $slides.css({
                transform:"translateX(-1200px)",
            })
        }
        current = 2;
    })
}
function makeFakeImg(){//克隆假的图片,并放到应有的位置上
    // 闭包:函数和这个函数用到的作用于之外的变量.js函数不用传参进来,可以直接对作用域外的变量进行作用
    let $firstImg = $imgs.eq(0).clone(true);
    let $lastImg = $imgs.eq($imgs.length-1).clone(true);
    /*
    * console.log($firstImg[0].outerHTML);
    console.log($lastImg[0].outerHTML);//在jquery中如果对jquery元素写$lastImg[0]这样就是原来的元素,可以用原来的方法
    * */
//添加克隆的图片
    $slides.append($firstImg);
    $slides.prepend($lastImg);
}

无缝轮播优化,可随意图片不用修改js代码

let $btns = $("#btns>button");
let $slides = $("#slides");
let current = 0;//当前图片元素的index值
let $imgs = $slides.children("img");

makeFakeImg();//克隆假的图片,并放到应有的位置上
$slides.css({transform:"translateX(-400px)",})//初始化第一张图片的位置
binEvent();//绑定按钮的监听事件

function binEvent() {//绑定按钮的监听事件
    $btns.on("click",function (e) {
        let index = $(this).index();
        if (current ===($btns.length-1) && index===0){//如果他是从最后一张图来到第一张图
            $slides.css({
                transform:`translateX(-${($btns.length+1)*400}px)`,
            }).one("transitionend",function () {//待过渡结束后,再转到真正的位置
                $slides.hide().offset();
                $slides.css({
                    transform:`translateX(-400px)`,
                }).show()
            })
        }else if (current ===0 && index===($btns.length-1)) {//如果他是从第一张图来到最后一张图
            $slides.css({
                transform:`translateX(0px)`,
            }).one("transitionend",function () {
                $slides.hide().offset();
                $slides.css({
                    transform:`translateX(-${($btns.length)*400}px)`,
                }).show()
            })
        }else {//其余的直接转变
            $slides.css({
                transform:`translateX(-${(index+1)*400}px)`,
            });
        }
        current=index;
    })
}
function makeFakeImg(){//克隆假的图片,并放到应有的位置上
    let $firstImg = $imgs.eq(0).clone(true);
    let $lastImg = $imgs.eq($imgs.length-1).clone(true);

//添加克隆的图片
    $slides.append($firstImg);
    $slides.prepend($lastImg);
}

代码
演示

let $pointBtns = $("#pointBtns>div");
let $slides = $("#slides");
let current = 0;//当前图片元素的index值
let $imgs = $slides.children("img");

makeFakeImg();//克隆假的图片,并放到应有的位置上
$slides.css({transform:"translateX(-400px)",})//初始化第一张图片的位置
binEvent();//绑定按钮的监听事件

//绑定上一张下一张按钮监听事件
$("#prevBtn").on("click",function () {
    goToslides(current-1);
})
$("#nextBtn").on("click",function () {
    goToslides(current+1);
})

//定时轮播
let timer = setInterval(function () {
    goToslides(current+1);
},1000)
$(".container").on("mouseenter",function () {
    window.clearInterval(timer);
})
$(".container").on("mouseleave",function () {
    timer = setInterval(function () {
        goToslides(current+1);
    },1000)
})

//barBtn的显示与消失
$(".window").on("mouseenter",function () {
    $(".barBtn").addClass("active");
})
$(".window").on("mouseleave",function () {
    $(".barBtn").removeClass("active");
})



function binEvent() {//绑定按钮的监听事件
    $pointBtns.on("click",function (e) {
        let index = $(this).index();
        goToslides(index);//传入要进入的下一个图片的index,然后执行图片转换工作
    })
}
function makeFakeImg(){//克隆假的图片,并放到应有的位置上
    // 闭包:函数和这个函数用到的作用于之外的变量.js函数不用传参进来,可以直接对作用域外的变量进行作用
    let $firstImg = $imgs.eq(0).clone(true);
    let $lastImg = $imgs.eq($imgs.length-1).clone(true);
    /*
    * console.log($firstImg[0].outerHTML);
    console.log($lastImg[0].outerHTML);//在jquery中如果对jquery元素写$lastImg[0]这样就是原来的元素,可以用原来的方法
    * */
//添加克隆的图片
    $slides.append($firstImg);
    $slides.prepend($lastImg);
}

function goToslides(index) {//传入要进入的下一个图片的index,然后执行图片转换工作

    //在这里判断上一张下一张传进来的index越界问题
    if (index > $imgs.length-1){
        index = 0;
    } else if (index < 0){
        index = $imgs.length - 1;
    }

    //给下标为index的圆点按钮添加变成orange的代码
    $pointBtns.eq(index).addClass("active").siblings().removeClass("active");

    if (current ===($imgs.length-1) && index===0){//如果他是从最后一张图来到第一张图
        $slides.css({
            transform:`translateX(-${($imgs.length+1)*400}px)`,
        }).one("transitionend",function () {//待过渡结束后,再转到真正的位置
            $slides.hide().offset();
            $slides.css({
                transform:`translateX(-400px)`,
            }).show()
        })
    }else if (current ===0 && index===($imgs.length-1)) {//如果他是从第一张图来到最后一张图
        $slides.css({
            transform:`translateX(0px)`,
        }).one("transitionend",function () {
            $slides.hide().offset();
            $slides.css({
                transform:`translateX(-${($imgs.length)*400}px)`,
            }).show()
        })
    }else {//其余的直接转变
        $slides.css({
            transform:`translateX(-${(index+1)*400}px)`,
        });
    }
    current=index;
}

代码
演示