移動端輪播圖實現(xiàn)方法（dGun.js）

waruqi 發(fā)布于2019-08-23 12:25 / 1565人閱讀

摘要：本文章介紹在移動端無縫隙輪播圖實現(xiàn)的原理，這個輪子比較簡單，但可以方便剛剛?cè)腴T的同學(xué)參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。就是小的控制點(diǎn)了，但移動端沒有點(diǎn)擊小點(diǎn)的功能。

本文章介紹在移動端無縫隙輪播圖實現(xiàn)的原理，這個輪子比較簡單，但可以方便剛剛?cè)腴T的同學(xué)參考。最終效果是在移動端無縫隙無限滑動，可以自定義輪播的速度。支持手勢左右滑動。最后會放上源碼。

HTML部分

輪播圖的html就是這樣，我們配合著css來看，接下來上css。

Css部分

 * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .outer {
        margin: 0 auto;
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;
    }
    .inner {
        height: 150px;
        overflow: hidden;
        width: 8000px;
    }
    .inner .goIndex {
        float: left;
        height: 150px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .num {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20%;
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
    }
    .num li {
        margin: 0 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .2);
    }
    .num li.select {
        background: rgba(0, 0, 0, .7);
    }

我們通過css可以看到，.outer為最外層的殼，超出的部分都會隱藏，.inner為一個很長很長的容器，而item為單個item。結(jié)構(gòu)比較簡單。ul就是小的控制點(diǎn)了，但移動端沒有點(diǎn)擊小點(diǎn)的功能。

頁面中Js部分

    //function dGun(obj = {})   這是dGun.js的主函數(shù)
    // 初始化兩個圖片輪播
    dGun({id:"oneTest",time:10000});
    dGun({id:"twoTest",time:4000});
    // 點(diǎn)擊后跳轉(zhuǎn)
    var goList = document.getElementsByClassName("goIndex");
    for (var i = 0; i < goList.length; i++) {
        goList[i].addEventListener("click", function () {
            window.location = this.getAttribute("goUrl")
        })
    }

dGun()就是初始化輪播圖我們需要傳入?yún)?shù)，第一個參數(shù)id為.outer盒子的id，第二個為自動切換時間。下面的是簡單的點(diǎn)擊跳轉(zhuǎn)功能。

dGun.js 初始化部分

     //function dGun(obj = {}) 包裹全部dGun內(nèi)代碼
    var id = obj.id;                                           //獲取domid
    var time = obj.time ? parseInt(obj.time) : 3000;           //默認(rèn)3s
    time = time > 300 ? time : 1000;                           //間隔必須大于300
    var _width = document.querySelector("#"+id).offsetWidth;   //獲取輪播圖寬度
    var _index = 0;                                             //當(dāng)前是第幾個輪播 從-1開始
    var inner = document.querySelector("#"+id+" .inner");               //獲取輪播內(nèi)容外殼（很長的那個）
    var items = document.querySelectorAll("#"+id+" .item");             //獲取輪播元素

    // 將第一個元素復(fù)制到最后，將最后的元素復(fù)制到開頭
    var firstItem = items[0];
    var lastItem = items[items.length-1];
    inner.insertBefore(lastItem.cloneNode(true),firstItem);
    inner.appendChild(firstItem.cloneNode(true));
    inner.style.transform = "translateX(-"+_width+"px)";
    // 生成底部小圓點(diǎn)
    var imgLength = document.querySelector("#"+id+" .inner").children.length-2;
    var makeCir = "";
    for (var i = 0; i < imgLength - 1; i++) {
        makeCir += "";
    }
    document.querySelector("#"+id+" .num" ).innerHTML = makeCir;
    //設(shè)置輪播的寬度。
    var newItems = document.querySelectorAll("#"+id+" .item");
    for(var i = 0; i
前幾行代碼就不多介紹了，就是獲取dom，獲取寬度。
這里說一下將第一個元素復(fù)制到最后，將最后的元素復(fù)制到開頭，這是實現(xiàn)無縫隙的關(guān)鍵，比如我們有3張圖片1/2/3進(jìn)行輪播，這樣我們就需要將dom節(jié)點(diǎn)變?yōu)?/1/2/3/1，為什么這樣做呢，輪播圖原理是多個item并列，我們通過translateX進(jìn)行值的改變顯示不同區(qū)域，我們先將dom節(jié)點(diǎn)變?yōu)?/1/2/3/1，然后通過inner.style.transform = "translateX(-"+_width+"px)";這句代碼將初始化輪播顯示區(qū)域放到1這個圖片上。然后人們向右滑動，滑動到3的時候，再向右滑應(yīng)該顯示1，而我們dom節(jié)點(diǎn)中3的右邊就是1，這樣向右滑動到末尾1的時候我們快速通過translateX移動到開頭1的位置來實現(xiàn)無縫隙輪播。
手勢滑動實現(xiàn)
    var startX = 0, changedX = 0, originX = 0, basKey = 0;
    //手指點(diǎn)擊的X位置    滑動改變X的位置    inner的translateX的值    basKey是個鑰匙

    function Broadcast() {
        var that = this;
        this.box = document.querySelector("#"+id+" .inner");
        this.box.addEventListener("touchstart", function (ev) {
            that.fnStart(ev);
        })
    }

    // 輪播手指按下
    Broadcast.prototype.fnStart = function (ev) {
        clearInterval(autoPlay);          //手指按下的時候清除定時輪播
        if (!basKey) {
            var that = this;
            startX = ev.targetTouches[0].clientX;
            var tempArr = window.getComputedStyle(inner).transform.split(",");
            //獲取當(dāng)前偏移量
            if (tempArr.length > 2) {
                originX = parseInt(tempArr[tempArr.length - 2]) || 0;
            }
            this.box.ontouchmove = function (ev) {
                that.fnMove(ev)
            }
            this.box.ontouchend = function (ev) {
                that.fnEnd(ev)
            }
        }
    };
    // 輪播手指移動
    Broadcast.prototype.fnMove = function (ev) {
        ev.preventDefault();
        changedX = ev.touches[0].clientX - startX;
        var changNum = (originX + changedX);
        this.box.style.cssText = "transform: translateX(" + changNum + "px);";
    };
    // 輪播手指抬起
    Broadcast.prototype.fnEnd = function (ev) {
        // 移除底部按鈕樣式
        document.querySelector("#"+id+" .select").classList.remove("select");
        basKey = 1;
        setTimeout(function () {
            basKey = 0;
        }, 300)
        if (changedX >= 100) {                   //向某一方向滑動
            var _end = (originX + _width);
            this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
            _index--;
            if (_index == -1) {                //滑動到第一個了，為了實現(xiàn)無縫隙，滾到最后去
                document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
                play(-1);
            }
        } else if (changedX < -100) {         //向負(fù)的某一方向滑動
            var _end = (originX - _width);
            this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
            _index++;
            if (_index == imgLength) {       //滑到最后一個了，為了實現(xiàn)無縫隙，滾到前面去
                play(imgLength);
                document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
            }
        } else {                          //滑動距離太短，沒吃飯不用管
            this.box.style.cssText = "transform: translateX(" + originX + "px);transition:all .3s";
        }
        // 完成一次滑動初始化值
        startX = 0;
        changedX = 0;
        originX = 0;
        if (_index != -1 && _index != imgLength) {
            document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
        }
        this.box.ontouchmove = null;            //清除事件
        this.box.ontouchend = null;             //清除綁定事件
        autoPlay = setInterval(lunbo, time)      //開啟輪播
    }
我們定義Broadcast方法監(jiān)聽用戶的觸屏按下事件
當(dāng)手指按下時，我么記錄手指按下的X軸位置，單后進(jìn)行監(jiān)聽移動和抬起的事件。
手指移動的時候我們要做到就是計算偏移量，并通過偏移量改變inner的位置。
手指抬起時，我們查看偏移量十分大于100，這個值可以改，也可以改一下變成傳參。通過正負(fù)判斷方向，并通過index判斷當(dāng)前是第幾個，如果是滑動到我們復(fù)制的第一個和最后一個節(jié)點(diǎn)，則執(zhí)行play函數(shù)，我們接下來講解。然后改變控制點(diǎn)樣式就比較簡單了，最后初始化值，并清除監(jiān)聽事件。
play函數(shù)，快速滾
    //首尾無縫連接
    function play(index) {
        setTimeout(function () {
            inner.style.transition = "all 0s";
            if (index == -1) {
                var _number = -imgLength * _width;
                inner.style.transform = "translateX(" + _number + "px)";
                _index = imgLength - 1;
            } else if (index == imgLength) {
                inner.style.transform = "translateX(-" + _width + "px)";
                _index = 0;
            }
        }, 250);
    }
原理就是在圖片滑動完成的時候，快速設(shè)置滑動變化時間設(shè)為0，并改變translateX到應(yīng)該去的位置。
定時切換圖片
    function lunbo(){
        document.querySelector("#"+id+" .select").classList.remove("select");
        var tempArr = window.getComputedStyle(inner).transform.split(",");
        if (tempArr.length > 2) {
            originX = parseInt(tempArr[tempArr.length - 2]) || 0;
        }
        var _end = (originX - _width);
        inner.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
        _index++;
        if (_index != -1 && _index != imgLength) {
            document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
        }else if(_index == -1 ){
            document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
        } else if (_index == imgLength) {
            play(imgLength);
            document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
        }
    }
    // 初始化輪播
    var autoPlay = setInterval(lunbo,time);       //開啟輪播
    var _Broadcast = new Broadcast();             //實例觸摸
這個就是開啟個定時器，過固定的時間偏移inner的X，并根據(jù)是第幾個來判斷是否要執(zhí)行play函數(shù)。

https://github.com/Zhoujiando...  源碼在這里面，大家可以看一下，萌新如果感覺有幫助麻煩點(diǎn)下Star 點(diǎn)奇數(shù)次就好。   本人剛?cè)胄胁痪茫笊駛兛粗豁樠鄣牡胤铰闊┨崽嵋庖?，謝謝。最后提前給大家拜個早年。

云服務(wù)器 GPU云服務(wù)器 react實現(xiàn)輪播圖輪播圖寫輪播圖將輪播圖

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98495.html

發(fā)表評論

登陸后可評論

0條評論

waruqi

男|高級講師

我要關(guān)注我要私信

TA的文章

linux文件系統(tǒng)和日志分析

閱讀 1370·2021-11-25 09:43
2021年11月國產(chǎn)數(shù)據(jù)庫排行榜：openGauss闖入前三，Kingbase流行度與日俱增，TDe

閱讀 3582·2021-11-10 11:48
【STM32】位操作、按位與、按位或、按位異或、取反、左移、右移等基礎(chǔ) C 語言知識補(bǔ)充

閱讀 5091·2021-09-23 11:21
css之position定位

閱讀 1597·2019-08-30 15:55
我的白板

閱讀 3508·2019-08-30 13:53
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

閱讀 1235·2019-08-30 10:51
CSS定位

閱讀 868·2019-08-29 14:20
HTML表格布局

閱讀 1972·2019-08-29 13:11

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

移動端輪播圖實現(xiàn)方法（dGun.js）

相關(guān)文章