Explication détaillée de l'exemple de balayage du plug-in du carrousel h5 mobile

swipe.js est une bibliothèque coulissante légère js touch - Swipe JS. Il s'agit d'une très petite bibliothèque de classes javascript, mais sa fonction n'est pas simple. Elle peut être utilisée pour afficher n'importe quel contenu sur la page Web, prend en charge des opérations de mouvement tactile précises et peut également configurer la lecture automatique, la mise à l'échelle proportionnelle, etc. .

Dans les pages mobiles h5, nous avons souvent besoin d'images carrousel. Si vous n'avez pas besoin de trop d'effets, juste de simples effets de glissement du doigt et de rotation automatique, je préfère le plug-in swipe, mais Baidu The. la recherche de ce plug-in n'est pas terminée. J'ajouterai les fonctions dont vous pourriez avoir besoin.

Introduction à la fonction Swipe

Ce qui suit présente comment utiliser Swipe JS. Swipe a les paramètres suivants :

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。

De plus, il existe certains des paramètres les plus courants. utilisé des méthodes API, telles que :

prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

Comment utiliser Swipe

Après avoir compris les méthodes de fonction de base, voyons comment les utiliser.

D'abord la structure HTML :

<p id="slider" class="swipe">
  <p class="swipe-wrap">
    <p></p>
    <p></p>
    <p></p>
  </p>
</p>

Ensuite le code de style :

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > figure {
    float: left;
    width: 100%;
    position: relative;
}

Enfin, définissez la liaison JS et les paramètres :

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

Tant que les paramètres de fonction introduits ci-dessus y sont écrits, les fonctions correspondantes peuvent être réalisées.

Enfin, nous pouvons également ajouter des boutons haut et bas à l'interrupteur coulissant :

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

De plus, j'ajouterai quelques effets de paginateur :

Si vous avez besoin de l'effet de pagination à ce stade. Si c'est le cas, vous pouvez ajouter le code comme ceci :

La partie balise de navigation est la partie pertinente du paginateur, et il y a autant de balises li qu'il y a de diapositives (si vous avez besoin d'un effet paginator, ajoutez simplement une balise nav et ul Parce que la balise li représentant le point de pagination doit être générée dynamiquement, si vous ajoutez le module carrousel dynamiquement !)

<nav>
    <ul id="position">
      <!-- <li class="on"></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li> -->
    </ul>
</nav>

---

Le code d'instanciation correspondant. (les chaussures pour enfants avec une méthode d'écriture plus simplifiée peuvent utiliser leur propre méthode) :

var slider = Swipe(document.getElementById('slider'), {
                    auto: 3000,
                    continuous: true,
                    callback: function(pos) {
                        var i = bullets.length;
                        while (i--) {
                            bullets[i].className = ' ';
                        }
                        bullets[pos].className = 'on';
                    }
                });
var slides = document.querySelectorAll('.swipe-wrap figure').length;
var liBox = document.getElementById('position');
var liTab;
for (var i = 0; i < slides; i++) {
    liTab = document.createElement('li');
    if (i == 0) {
        liTab.className = 'on';
    }
    liBox.appendChild(liTab);
};
var bullets = document.getElementById('position').getElementsByTagName('li');

Il y a un autre point clé. Ce plug-in s'arrêtera après avoir glissé une fois votre doigt sur le module coulissant, et il le fera. ne tourne plus automatiquement. À ce stade, vous devez vous rendre sur swipe.js Modifier le code source :

Pour que ce plug-in puisse fonctionner normalement et répondre à vos besoins les plus élémentaires.

Recommandations associées :

Utilisation de Swiper sur le terminal mobile

Explication détaillée de la mise en œuvre de Vue Swiper pour le développement de composants

Introduction à l'utilisation de Swiper en JS

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!