無縫輪播

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。