无缝轮播

最新推荐文章于 2024-09-21 09:29:16 发布

weixin_34055910

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015782937

版权

无缝轮播

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

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代码

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优化,添加左右按钮,点按钮,自动轮播

代码
 演示

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

代码
 演示

weixin_34055910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫