具体介绍如何用H5实现触屏版的轮播器
本篇文章主要介绍了如何用H5实现一个触屏版的轮播器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
初入前端,分享一下手机上触屏版轮播器的实现过程,大致功能如下:
1、支持循环滑动
2、宽度可任意设置,不需要与屏幕等宽
3、页面可纵向滚动
4、可设置回调监听元素的切换
5、纯js,不借助任何第三方库
原理
1、假设子元素.item的width为375px,使用绝对定位将所有子元素放在父元素内
2、将父元素.carousel的width设置为375px,与子元素.item宽度相同
3、为父元素.carousel添加触摸事件:touchstart, touchmove, touchend
4、手指按下时,保存初始位置(clientX)
5、手指滑动时,通过滑动距离判断滑动的方向:
①手指向左滑动,则同时移动当前元素和当前元素右边的元素
②手指向右滑动,则同时移动当前元素和当前元素左边的元素
6、手指抬起时,通过滑动距离判断是否切换到下一页
①移动距离未超过子元素宽度的50%,将当前页面回滚到初始位置,不切换当前元素。
②移动距离超过子元素宽度的50%,切换当前元素为下一个元素。
③将当前元素的transform属性设置为translate3d(0px, 0px, 0px),并将z-index属性+1
④将下一个子元素的transform属性设置为translate3d(375px, 0px, 0px),并将z-index属性+1
⑤将上一个子元素的transform属性设置为translate3d(-375px, 0px, 0px),并将z-index属性+1
⑥将其他所有子元素的z-index属性设置为默认值
7、第一个子元素的上一个元素是最后一个元素,最后一个元素的下一个元素是第一个元素,该步骤通过循环链表实现。
移动时设置的是子元素.item的transform属性,而不是父元素.carousel
实现步骤
html&css
//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%; }
js
设置初始状态
首先实现一个双向链表,用于维护轮播组件中的元素。
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); } } }
有了链表之后,创建一个链表实例,将子元素添加进链表内,并设置一些初始状态
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
绑定触摸事件
touchstart事件
手指按下时,保存初始位置
_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);
touchmove事件
手指在屏幕上滑动,页面跟随手指移动
_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);
touchend事件
手指离开屏幕时,计算最终需要停留在哪一页
_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);
Carousel库
为了方便使用,我将整个实现过程封装成了一个库,并添加了prev(), next()方法,使用非常简单:
<script src="lib/carousel.js"></script> CreateCarousel("carousel", "item", true) .bindTouchEvent() .setItemChangedHandler(onPageChanged); //参数"carousel"为容器的类名 //参数"item"为子元素的类名 //第三个参数设置是否需要循环播放,true为循环播放
Atas ialah kandungan terperinci 具体介绍如何用H5实现触屏版的轮播器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

H5 merujuk kepada HTML5, versi terkini HTML H5 ialah bahasa penanda yang berkuasa yang menyediakan pembangun dengan lebih banyak pilihan dan ruang kreatif Kemunculannya menggalakkan pembangunan teknologi Web dan menjadikan interaksi dan kesan halaman web lebih Cemerlang, sebagai teknologi H5. secara beransur-ansur matang dan menjadi popular, saya percaya ia akan memainkan peranan yang semakin penting dalam dunia Internet.

Artikel ini akan membantu anda membezakan dengan cepat antara H5, bahagian hadapan WEB, bahagian hadapan yang besar dan timbunan penuh WEB. Saya harap ia akan membantu rakan yang memerlukan.

Dalam H5, anda boleh menggunakan atribut kedudukan untuk mengawal kedudukan elemen melalui CSS: 1. Kedudukan relatif, sintaksnya ialah "style="position: relative;"; 2. Kedudukan mutlak, sintaksnya ialah "style="position: mutlak;" "; 3. Kedudukan tetap, sintaksnya ialah "style="position: fixed;" dan seterusnya.

Langkah-langkah pelaksanaan: 1. Pantau acara tatal halaman 2. Tentukan sama ada halaman telah menatal ke bawah 3. Muatkan halaman seterusnya data;

Penerangan pemaparan adalah berdasarkan vue.js dan tidak bergantung pada pemalam atau perpustakaan lain, fungsi asas kekal konsisten dengan elemen-ui, dan beberapa pelarasan telah dibuat pada pelaksanaan dalaman untuk perbezaan mudah alih. Platform pembinaan semasa dibina menggunakan perancah rasmi uni-app Oleh kerana kebanyakan terminal mudah alih pada masa ini mempunyai dua jenis: program mini h6 dan WeChat, ia sangat sesuai untuk pemilihan teknologi untuk menjalankan satu set kod pada berbilang terminal. Api teras idea pelaksanaan: gunakan menyediakan dan menyuntik, sepadan dengan dan. Dalam komponen, pembolehubah (tatasusunan) digunakan secara dalaman untuk menyimpan semua kejadian, dan data yang akan dipindahkan didedahkan melalui menyediakan komponen menggunakan suntikan secara dalaman untuk menerima data yang disediakan oleh komponen induk, dan akhirnya menggabungkan atributnya sendiri dengan penyerahan kaedah

Artikel ini akan memberi anda pengenalan kepada tag promosi H5 baharu. Saya harap ia dapat membantu rakan yang memerlukan!

HTML5 dan PHP ialah dua teknologi yang biasa digunakan dalam pembangunan web yang pertama digunakan untuk membina susun atur halaman, gaya dan interaksi, dan yang kedua digunakan untuk mengendalikan logik perniagaan dan penyimpanan data sebelah pelayan. Mari selami pengetahuan berkaitan HTML5 dan PHP.

H5 tidak mempunyai mekanisme caching langsung, tetapi dengan menggabungkan teknologi seperti Web Storage API, IndexedDB, Service Workers, Cache API dan Application Cache, ia boleh mencapai fungsi caching yang berkuasa dan meningkatkan prestasi, ketersediaan dan kebolehskalaan aplikasi ini Ia boleh dipilih dan digunakan mengikut keperluan dan senario aplikasi yang berbeza. Pengenalan terperinci: 1. API Storan Web adalah mudah dan sebagainya yang disediakan oleh H5.
