無縫輪播

xiaochao 發布于2019-08-23 10:24 / 1408人閱讀

摘要：無縫輪播工作中遇到輪播怎么辦千萬不要自己寫輪播我們學這么多基礎是為了能夠看懂大神的代碼然后用大神的代碼因為如果自己寫一個輪播就可能出現各種各樣的如果是在工作中這樣做無異于浪費自己的時間降低工作效率最好的方法是直接用大神寫好的源碼然后看使用文

無縫輪播

工作中遇到輪播怎么辦?千萬不要自己寫輪播
我們學這么多基礎是為了能夠看懂大神的代碼,然后用大神的代碼
因為如果自己寫,一個輪播,就可能出現各種各樣的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;
}

代碼
演示

GPU云服務器云服務器 js無縫輪播無縫無縫遷移無縫拖動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96311.html

最簡單的無縫輪播

摘要：昨天學習了輪播的原理，今天再來看看無縫輪播的技術。無縫輪播無縫輪播的原來大致類似小時候跳大繩，小朋友一個個進入，一個個出來，出來后排到隊伍末尾，等在著進入，無縫輪播也類似這種機制。昨天學習了輪播的原理，今天再來看看無縫輪播的技術。昨天學習的輪播機制類似于走馬燈，所有圖片排成一排，輪流在你眼前走過，你就會感覺他們動起來了，今天學的無縫輪播就不能用昨天的思路了，它和昨天最大的區別是，從...

Kyxy 2019-08-22 17:25 評論0 收藏0
js、jQuery實現文字上下無縫輪播、滾動效果

摘要：因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。原生JS版本文字上下無縫輪播 * { margin: ...

zhangwang 2019-08-22 18:24 評論0 收藏0
js、jQuery實現文字上下無縫輪播、滾動效果

摘要：因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。原生JS版本文字上下無縫輪播 * { margin: ...

PAMPANG 2019-08-02 10:48 評論0 收藏0
js、jQuery實現文字上下無縫輪播、滾動效果

摘要：因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。因項目需要實現消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。原生JS版本文字上下無縫輪播 * { margin: ...

focusj 2019-08-30 15:53 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

MSchumi 2019-08-02 16:03 評論0 收藏0