无缝轮播

时间 2019-11-10

标签无缝繁體版

原文原文链接

无缝轮播

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

1无缝轮播

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);
}

2无缝轮播优化

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

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);
}

3优化,添加左右按钮,点按钮,自动轮播

代码
 演示
 jquery

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;
}

代码
 演示git