Effet de commutation coulissant hwSlider-content (2) : glissement tactile réactif

Aujourd'hui, nous continuons à expliquer la deuxième partie de l'effet de changement de contenu par glissement. De nos jours, notre développement Web doit s'adapter aux appareils mobiles, ce qui signifie que nos pages Web doivent également être accessibles sur des appareils mobiles tels que les téléphones mobiles. Par conséquent, j'ai amélioré l'effet de commutation de base de la première partie et ajouté une réactivité et un effet de glissement tactile.


Voir le code source de téléchargement de la démo

Cet article est la deuxième partie de l'effet de commutation coulissante de contenu hwSlider. La DÉMO de démonstration est basée sur le contenu de la première partie. , donc, si vous n'avez pas lu la première partie, veuillez vous référer à : hwSlider-content slideswitching effect (1)

Responsive

Qu'est-ce que le responsive design, ici I I je ne le décrirai pas. Dans hwSlider, nous définissons la largeur et la hauteur du curseur via CSS, et définissons la largeur en pourcentage.

[code=css]
#hwslider{width: 100%;height:auto;min-height: 120px;margin:40px auto; position: relative; overflow: hidden;}
#hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1}
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden;}
#hwslider ul li.active{display: block;}
#hwslider ul li img{max-width: 100%}
#dots{position: absolute; bottom:20px; left:200px; min-width:60px; height: 12px; z-index: 2;}
#dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;}
#dots span.active{background:orangered}
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none}
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;}
#hwslider:hover .arr{display: block; text-decoration: none;color: #fff}
#prev{left: 20px}
#next{right: 20px}

Ensuite, nous définissons les variables au début de la partie js. Dans la fonction d'initialisation resize(), nous calculons et positionnons les positions des points de navigation et des flèches de navigation, et dans le resize() de la fenêtre du navigateur est également appelé lors du redimensionnement.

[code=js]
$(function(){
    var slider = $("#hwslider");
    var dots = $("#dots span"),
        prev = $("#prev"),next = $("#next");
    var sliderInder = slider.children('ul')
    var hwsliderLi = sliderInder.children('li');
    var hwsliderSize = hwsliderLi.length;  //滑块的总个数
    var sliderWidth = 600; //滑块初始宽度
    var sliderHeight = 320; //滑块初始高度
    var index = 1; //初始显示第一个滑块
    var speed = 400; //滑动速度
    var interval = 3000; //间隔时间
    var dotShow = true; //是否显示可切换的导航圆点
    var autoPlay = false; //是否支持自动滑动
    var clickable = true; //是否已经点击了滑块在做滑动动画



    //初始化组件
    var resize = function(){
        var sWidth = slider.width();
        var dotWidth = hwsliderSize*20;
        var dotOffset = (sWidth-dotWidth)/2;

        var sHeight = sliderHeight/sliderWidth*sWidth;
        slider.css('height',sHeight);
        $("#dots").css('left',dotOffset+'px'); //导航圆点位置

        var arrOffset = (sHeight-40)/2;
        $(".arr").css('top',arrOffset+'px'); //导航箭头位置
    }

    resize();

    $(window).resize(function(){
      resize();
    });

});

Glissement de l'écran tactile mobile

Sur les appareils mobiles, nous pouvons appuyer sur l'écran et utiliser le glissement gestuel pour changer le curseur. Pour obtenir cet effet, l'événement core touch doit être utilisé. La gestion des événements tactiles permet de suivre chaque doigt glissant sur l'écran.

Voici quatre événements tactiles :

touchstart : déclenché lorsque le doigt est placé sur l'écran

touchmove : déclenché lorsque le doigt glisse sur l'écran

touchend : Déclenché lorsque le doigt quitte l'écran

touchcancel : Déclenché lorsque le système annule l'événement tactile

D'accord, nous devons maintenant nous lier et écouter. événements tactiles sur le curseur, obtenez la position du doigt sur le curseur de l'écran au début et à la fin du toucher respectivement, puis déterminez s'il faut glisser vers la gauche ou la droite en fonction du déplacement, puis appelez moveTo() pour implémenter la commutation coulissante.

[code=css]
var mouseX = 0,
    touchStartY = 0,
    touchStartX = 0;

    hwsliderLi.on({
        //触控开始
        'touchstart': function(e) {
            touchStartY = e.originalEvent.touches[0].clientY;
            touchStartX = e.originalEvent.touches[0].clientX;
        },

        //触控结束
        'touchend': function(e) {
            var touchEndY = e.originalEvent.changedTouches[0].clientY,
                touchEndX = e.originalEvent.changedTouches[0].clientX,
                yDiff = touchStartY - touchEndY,
                xDiff = touchStartX - touchEndX;

            if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
                if ( xDiff > 5 ) {
                    if(index >= hwsliderSize){
                        index = 1;
                    }else{
                        index += 1;
                    }
                    moveTo(index,'next');
                } else {
                    if(index == 1){
                        index = hwsliderSize;
                    }else{
                        index -= 1;
                    }
                    moveTo(index,'prev');
                }
            }
            touchStartY = null;
            touchStartX = null;
        },

        //触控移动
        'touchmove': function(e) {
            if(e.preventDefault) { e.preventDefault(); }

        }
    });

Couplé au code slider js de base de l'article précédent, un effet de glissement de contenu tactile réactif peut être obtenu.
Si vous souhaitez implémenter le glisser-déposer sur PC, vous devez lier les événements onmousedown, onmousemove et onmouseup du curseur pour réaliser la commutation coulissante en maintenant la souris enfoncée et en faisant glisser le curseur. Le code principal ne sera pas publié ici. . Vous pouvez télécharger le code source pour le visualiser.

Ce qui précède est le contenu de l'effet de commutation coulissante hwSlider-content (2) : contenu coulissant tactile réactif. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). !

Articles connexes :

Des exemples vous aident à comprendre l'élément de sélection de zone coulissante HTML5 Élément curseur

Effet de commutation coulissant hwSlider-Content (1)

Introduction détaillée du composant de curseur d'applet WeChat