Méthode de mise en œuvre du graphique carrousel sur terminal mobile (code source ci-joint)

Le contenu de cet article concerne la méthode de mise en œuvre du graphique carrousel sur le terminal mobile (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Cet article présente le principe du carrousel transparent sur le terminal mobile. Cette roue est relativement simple, mais elle peut être une référence pratique pour les étudiants qui débutent. L'effet final est un glissement fluide et infini sur le terminal mobile, et la vitesse du carrousel peut être personnalisée. Prend en charge les gestes coulissants gauche et droit. Le code source sera publié à la fin.

Partie 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>

Le html de l'image du carrousel est comme ça Regardons-le avec le css, puis nous passerons au css.

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

Nous pouvons voir à travers le CSS que .outer est la coque la plus externe et que la partie excédentaire sera cachée. .inner est un conteneur très long. article unique. La structure est relativement simple. ul est un petit point de contrôle, mais le terminal mobile n'a pas pour fonction de cliquer sur de petits points.

La partie Js de la page

    //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() sert à initialiser l'image du carrousel. Nous devons passer des paramètres. Le premier paramètre id est l'identifiant de la boîte .outer. , et le deuxième paramètre est le temps de commutation automatique. Vous trouverez ci-dessous une simple fonction de clic pour sauter.

Partie d'initialisation 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";
    }

Je ne présenterai pas les premières lignes de code, qui consistent à obtenir le dom et à obtenir la largeur.
Ici, nous parlons de copier le premier élément vers la fin et de copier le dernier élément vers le début. C'est la clé pour obtenir une fluidité. Par exemple, nous avons 3 images 1/2/3 pour la rotation, nous avons donc besoin de Changement. le nœud dom en 3/1/2/3/1. Pourquoi faites-vous cela ? Le principe du graphique carrousel est que plusieurs éléments sont juxtaposés. Nous modifions la valeur via TranslateX pour afficher différentes zones. à 3/ 1/2/3/1, puis utilisez inner.style.transform = "translateX(-"+_width+"px)"; ce code placera la zone d'affichage initiale du carrousel sur l'image 1. Ensuite, les gens glissent vers la droite lorsqu'ils glissent vers 3, glisser à nouveau vers la droite devrait afficher 1, et le côté droit de 3 dans notre nœud dom est 1. De cette façon, lorsque nous glissons vers la droite jusqu'à 1 à la fin, nous passons rapidement au point. position de 1 au début via TranslateX Pour obtenir un carrousel transparent.

Implémentation du glissement gestuel

    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)      //开启轮播
    }

Nous définissons la méthode de diffusion pour surveiller l'événement de pression sur l'écran tactile de l'utilisateur
Lorsque le doigt appuie, nous enregistrons la position sur l'axe X de la pression du doigt . Surveillez les événements de déplacement et de levage après un seul mouvement.
Lorsque le doigt bouge, ce que nous devons faire est de calculer le décalage et de changer la position de l'intérieur grâce au décalage.
Lorsque le doigt est levé, on vérifie que le décalage est supérieur à 100. Cette valeur peut être modifiée, ou elle peut être transformée en paramètre. Déterminez la direction par positif et négatif, et déterminez le numéro actuel par index. S'il glisse vers le premier et le dernier nœud que nous avons copié, la fonction de lecture sera exécutée, ce que nous expliquerons ensuite. Il est ensuite relativement simple de modifier le style du point de contrôle, puis d'initialiser la valeur et d'effacer l'événement d'écoute.

Fonction de lecture, défilement rapide

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

Le principe est de régler rapidement le temps de changement de glissement à 0 lorsque le glissement de l'image est terminé, et de changer TranslateX dans la position où il doit aller.

Changez d'image régulièrement

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

Il s'agit de démarrer une minuterie, de décaler le X intérieur d'une durée fixe et de déterminer s'il faut exécuter la fonction de lecture en fonction du nombre.

https://github.com/Zhoujiando... Le code source est ici, vous pouvez y jeter un œil.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!