Maison >interface Web >Tutoriel H5 >Un exemple de tutoriel sur la mise en œuvre d'un carrousel (version écran tactile) à l'aide de H5
Je suis nouveau dans le front-end et j'aimerais partager le processus de mise en œuvre du carrousel à écran tactile sur les téléphones mobiles. Les fonctions générales sont les suivantes :
Prend en charge le glissement circulaire.
La largeur peut être définie arbitrairement et n'a pas besoin d'être la même largeur que l'écran
La page peut défiler verticalement
Les éléments de surveillance des rappels peuvent être configurés pour basculer
Pure js, sans aucune bibliothèque tierce
Supposer des éléments enfants.item
Le width
mesure 375 pixels, utilisez le positionnement absolu pour placer tous les éléments enfants à l'intérieur de l'élément parent
Définissez le .carousel
de l'élément parent width
sur 375px et l'élément enfant .item
Même largeur
Ajoutez des événements tactiles pour l'élément parent .carousel
: touchstart
, touchmove
, touchend
pression du doigt Lorsque le doigt glisse, la position initiale (clientX
) est enregistrée. Faites glisser votre doigt vers la gauche pour déplacer l'élément actuel. et l'élément à droite de l'élément courant en même temps
Faites glisser votre doigt vers la droite pour déplacer l'élément courant et l'élément à gauche de l'élément courant à
Lorsque le doigt est levé, la distance de glissement est utilisée pour déterminer s'il faut passer à la page suivante
La distance de mouvement dépasse 50 % de la largeur de l'élément enfant, basculant l'élément actuel vers l'élément suivant.
de l'élément actuel sur
et définit l'attribut et définissez l'attribut transform
+1translate3d(0px, 0px, 0px)
z-index
et définissez transform
Attribut +1translate3d(375px, 0px, 0px)
z-index
transform
translate3d(-375px, 0px, 0px)
z-index
z-index
Étapes de mise en œuvre
js
Définir l'état initial.carousel
//html <p class="carousel" ontouchstart="" > <p class="item" style="background: #3b76c0" > <h3 >item-1</h3> </p> <p class="item" style="background: #58c03b;"> <h3>item-2</h3> </p> <p class="item" style="background: #c03b25;"> <h3>item-3</h3> </p> <p class="item" style="background: #e0a718;"> <h3>item-4</h3> </p> <p class="item" style="background: #c03eac;"> <h3>item-5</h3> </p> </p> //css .carousel{ height: 50%; position: relative; overflow: hidden; } .item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }Lier les événements tactiles
function Node(data) { this.data = data; this.prev = null; this.next = null; this.index = -1; } //双向循环列表 function LinkList() { var _nodes = []; this.head = null; this.last = null; if (typeof this.append !== "function") { LinkList.prototype.append = function (node) { if (this.head == null) { this.head = node; this.last = this.head; } else { this.head.prev = node; this.last.next = node; node.prev = this.last; node.next = this.head; this.last = node; } node.index = _nodes.length; //务必在push前设置node.index _nodes.push(node); } } }événement touchmove
var _container = document.querySelector("." + containerClass); var _items = document.querySelectorAll("." + itemClass); var list = loop ? new LinkList() : new SingleList(); for(var i = 0; i < _items.length; i++) { list.append(new Node(_items[i])); } var _prev = null; //保存之前显示的元素 var _current = list.head; //保存当前显示的元素,默认为第一个元素 var _normalZIndex = _current.data.style.zIndex; //未显示元素的z-index值 var _activeZIndex = _normalZIndex + 1; //当前显示元素的z-index值 var _itemWidth = _current.data.offsetWidth; //子元素宽度 positionItems(); //初始化元素位置 zindexItems(_current, _activeZIndex); //将当前元素及其左右元素的z-index加1
_container.addEventListener("touchstart", function(e) { // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动 var touch = e.touches[0]; startX = touch.clientX; //保存手指按下时的位置 startY = touch.clientY; _container.style.webkitTransition = ""; //取消动画效果 startT = new Date().getTime(); //记录手指按下的开始时间 isMove = false; transitionItems(_prev, false); //取消之前元素的过渡 transitionItems(_current, false); //取消当前元素的过渡 }, false);Bibliothèque carrousel
Pour faciliter l'utilisation, je vais terminer l'ensemble du processus d'implémentation. Il est encapsulé dans une bibliothèque et ajoute les méthodes
_container.addEventListener("touchmove", function(e) { // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动 var touch = e.touches[0]; var deltaX = touch.clientX - startX; //计算手指在X方向滑动的距离 var deltaY = touch.clientY - startY; //计算手指在Y方向滑动的距离 //如果X方向上的位移大于Y方向,则认为是左右滑动 if (Math.abs(deltaX) > Math.abs(deltaY)){ translate = deltaX > _itemWidth ? _itemWidth : deltaX; translate = deltaX < -_itemWidth ? -_itemWidth : deltaX; //同时移动当前元素及其左右元素 moveItems(translate); isMove = true; } }, false);et
_container.addEventListener("touchend",function(e) { // e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动 //是否会滚 var isRollback = false; //计算手指在屏幕上停留的时间 var deltaT = new Date().getTime() - startT; if (isMove) { //发生了左右滑动 //如果停留时间小于300ms,则认为是快速滑动,无论滑动距离是多少,都停留到下一页 if(deltaT < 300){ translate = translate < 0 ? -_itemWidth : _itemWidth; }else { //如果滑动距离小于屏幕的50%,则退回到上一页 if (Math.abs(translate) / _itemWidth < 0.5){ isRollback = true; }else{ //如果滑动距离大于屏幕的50%,则滑动到下一页 translate = translate < 0 ? -_itemWidth : _itemWidth; } } moveTo(translate, isRollback); } }, false);
Principe de commutation d'écran coulissant gestuel d'une seule page H5prev()
next()
bonne nuit !
<script src="lib/carousel.js"></script> CreateCarousel("carousel", "item", true) .bindTouchEvent() .setItemChangedHandler(onPageChanged); //参数"carousel"为容器的类名 //参数"item"为子元素的类名 //第三个参数设置是否需要循环播放,true为循环播放[Recommandations associées]1.
Manuel de la version complète HTML5
3.
Tutoriel vidéo html5 original php.cn
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!