モバイル端末でのカルーセルチャートの実装方法（ソースコード添付）-jsチュートリアル-php.cn

この記事はモバイル端末でのカルーセルチャートの実装方法に関するものです(ソースコード添付)。お困りの方は参考にしていただければ幸いです。

この記事では、モバイル端末でのシームレスなカルーセルチャートの実装の原理を紹介します。このホイールは比較的単純ですが、始めたばかりの学生にとっては便利な参考になります。最終的な効果はモバイル端末上でシームレスかつ無限にスライドし、カルーセルの速度はカスタマイズできます。左右のスライドジェスチャをサポートします。ソースコードは最後に載せておきます。

HTML部分

   <div class="outer" id="oneTest">
        <div class="inner">
            <div class="goIndex item" goUrl="https://www.baidu.com"
                 style="background-image:url(1.jpg)"></div>
            <div class="goIndex item" goUrl="https://www.baidu.com"
                 style="background-image:url(2.jpg)"></div>
            <div class="goIndex item" goUrl="https://www.baidu.com"
                 style="background-image:url(3.jpg)"></div>
        </div>
        <ul class="num"></ul>
    </div>

ログイン後にコピー

カルーセル画像のHTMLはこんな感じです。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 です。。構造は比較的単純です。 ul は小さな制御点ですが、携帯端末には小さな点をクリックする機能がありません。

ページの Js 部分

    //function dGun(obj = {})   这是dGun.js的主函数
    // 初始化两个图片轮播
    dGun({id:"oneTest",time:10000});
    dGun({id:"twoTest",time:4000});
    // 点击后跳转
    var goList = document.getElementsByClassName("goIndex");
    for (var i = 0; i < goList.length; i++) {
        goList[i].addEventListener("click", function () {
            window.location = this.getAttribute("goUrl")
        })
    }

ログイン後にコピー

dGun() は、カルーセル画像を初期化するために、最初のパラメーター id は .outer ボックスの ID です。 2 番目のパラメータは自動切り替え時間です。以下は、単純なクリックによるジャンプ機能です。

dGun.js の初期化部分

     //function dGun(obj = {}) 包裹全部dGun内代码
    var id = obj.id;                                           //获取domid
    var time = obj.time ? parseInt(obj.time) : 3000;           //默认3s
    time = time > 300 ? time : 1000;                           //间隔必须大于300
    var _width = document.querySelector("#"+id).offsetWidth;   //获取轮播图宽度
    var _index = 0;                                             //当前是第几个轮播 从-1开始
    var inner = document.querySelector("#"+id+" .inner");               //获取轮播内容外壳（很长的那个）
    var items = document.querySelectorAll("#"+id+" .item");             //获取轮播元素

    // 将第一个元素复制到最后，将最后的元素复制到开头
    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)";
    // 生成底部小圆点
    var imgLength = document.querySelector("#"+id+" .inner").children.length-2;
    var makeCir = '<li class="select"></li>';
    for (var i = 0; i < imgLength - 1; i++) {
        makeCir += &#39;<li></li>';
    }
    document.querySelector("#"+id+" .num" ).innerHTML = makeCir;
    //设置轮播的宽度。
    var newItems = document.querySelectorAll("#"+id+" .item");
    for(var i = 0; i<newItems.length;i++){
        newItems[i].style.width = _width+"px";
    }

ログイン後にコピー

dom を取得して幅を取得する最初の数行のコードは紹介しません。
ここでは、最初の要素を最後にコピーし、最後の要素を先頭にコピーすることについて説明します。これは、たとえば、回転用の 3 つの画像 1/2/3 があるため、変更が必要です。 dom ノードを 3/1/2/3/1 に変更するのはなぜですか? カルーセルチャートの原理は、translateX を使用して値を変更し、異なる領域を表示することです。 3/ 1/2/3/1 に変更し、 inner.style.transform = "translateX(-" _width "px)"; を使用すると、初期化カルーセル表示領域が画像 1 に配置されます。次に、3 まで右にスライドすると、もう一度右にスライドすると 1 が表示され、dom ノードの 3 の右側が 1 になります。このようにして、最後に 1 まで右にスライドすると、すぐにに移動します。シームレスなカルーセルを実現するには、translateX を介して先頭に 1 の位置を設定します。

ジェスチャースライディングの実装

    var startX = 0, changedX = 0, originX = 0, basKey = 0;
    //手指点击的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(",");
            //获取当前偏移量
            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) {                //滑动到第一个了，为了实现无缝隙，滚到最后去
                document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
                play(-1);
            }
        } else if (changedX < -100) {         //向负的某一方向滑动
            var _end = (originX - _width);
            this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
            _index++;
            if (_index == imgLength) {       //滑到最后一个了，为了实现无缝隙，滚到前面去
                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)      //开启轮播
    }

ログイン後にコピー

ユーザーのタッチスクリーンの押下イベントを監視するブロードキャストメソッドを定義します
指が押されると、押された指の X 軸位置を記録します。移動やリフトのイベントに。
指が動いたときにやるべきことは、オフセットを計算し、オフセットを通じてインナーの位置を変更することです。
指を離すと、オフセットが 100 より大きいことを確認します。この値は変更することも、パラメーターを渡すために変更することもできます。正負で方向を決定し、インデックスで現在の番号を決定し、コピーした最初と最後のノードにスライドすると、次に説明する再生関数が実行されます。その後、コントロールポイントのスタイルを変更し、最後に値を初期化してリスニングイベントをクリアするのは比較的簡単です。

再生機能、クイックスクロール

    //首尾无缝连接
    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);
    }

ログイン後にコピー

原理は、画像のスライドが完了したらすぐにスライド変更時間を0に設定し、translateXを移動すべき位置に変更することです。

画像切り替えのタイミング

    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();             //实例触摸

ログイン後にコピー

タイマーをスタートさせ、内部のXを一定時間オフセットし、その数値に基づいて再生機能を実行するかどうかを決定します。

https://github.com/Zhoujiando... ソースコードはここにありますので、ご覧ください。

以上がモバイル端末でのカルーセルチャートの実装方法（ソースコード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。