Cara menggunakan H5 untuk mengimplementasikan contoh rotor layar sentuh

Di awal ujung depan, bagikan proses implementasi bangkai layar sentuh di ponsel.

1. Siklus mendukung geser

2. Lebar dapat diatur secara sewenang -wenang, tidak perlu lebar dengan layar

3. Halaman dapat bergulir secara vertikal

4. Anda dapat mengatur pergantian elemen pemantauan pemulihan

5. JS murni, jangan gunakan perpustakaan pihak ketiga mana pun

1. Asumsikan bahwa lebar sub -elemen .item adalah 375px, menggunakan posisi absolut untuk menempatkan semua sub -elemen dalam elemen induk

2. Atur lebar elemen induk .Carousel ke 375px, yang sama dengan sub -elemen .item lebar

3. Tambahkan acara sentuh ke elemen induk .Carousel: TouchStart, TouchMove, Touchend

4. Saat Anda menekan jari Anda, simpan posisi awal (ClientX)

5. Saat menggeser jari Anda, menilai arah meluncur dengan jarak geser:

① Geser jari ke kiri, dan gerakkan elemen di sisi kanan elemen saat ini dan elemen saat ini

② Geser jari Anda ke kanan, dan gerakkan elemen di sisi kiri elemen saat ini dan saat ini

6. Saat jari Anda diangkat, tentukan apakah akan beralih ke halaman berikutnya dengan jarak geser

① Jarak gerakan tidak melebihi 50%dari lebar sub -elemen, dan memutar kembali halaman saat ini ke posisi awal tanpa mengganti elemen saat ini.

② Jarak bergerak melebihi 50%dari lebar elemen anak, dan elemen saat ini dialihkan ke elemen berikutnya.

③ Atur properti transformasi dari elemen saat ini untuk menerjemahkan3D (0px, 0px, 0px) dan

④ Atur atribut transformasi dari elemen anak berikutnya untuk menerjemahkan3D (375px, 0px, 0px)

⑤ Atur atribut transformasi dari elemen anak sebelumnya untuk menerjemahkan3D (-375px, 0px, 0px), dan atribut z-index +1 +1

⑥ Tetapkan properti z-indeks dari semua sub-elemen lainnya ke nilai default

7. Elemen pertama dari elemen anak pertama adalah elemen terakhir, dan elemen berikutnya dari elemen terakhir adalah elemen pertama, yang diimplementasikan oleh daftar tertaut melingkar.

Saat bergerak, atur properti transformasi dari elemen anak.

HTML & CSS

 // html <div class = carousel ontouchstart => <div class = latar belakang: #3b76c0> </h3> </div> </div> <div class = itemle = backgr ound: #58c03b;> <h3> item- 2 </h3> </div> <div class = item style = latar belakang: #c03b25;> <h3> item-3 </h3> </div> <div class = latar belakang: #e0a718;> <h3> item -4 </h3> </div> <div class = item style = latar belakang: #c03eac;> <h3> item-5 </h3> </div> </div>

 //css.carousel {tinggi: Posisi;

JS

Atur keadaan awal

Pertama -tama sadari daftar tertaut dua arah untuk mempertahankan elemen dalam komponen rotasi.

 Function node (data) {this.data = data; Head = null; last = this.head;} ​​else {this.head.prev = node; Node .index = _nodes.length; // pastikan untuk mengatur node.index_nodes.push (node);}}

Setelah memiliki daftar tertaut, buat contoh tertaut, tambahkan sub -elemen ke dalam daftar yang ditautkan, dan atur beberapa status awal

 var _container = document.queryselector (. + ContainerClass); i ++) {list.append (node ​​baru (_items [i]));} var _prev = null; Zar _ActivezIndex = _normalzindex + 1; elemen untuk menambahkan 1

Saat Anda menekan jari Anda, simpan posisi awal

 _Container.addeventListener (touchstart, function (e) {// e.preventdefault (); // anotasi baris kode ini akan mencegah halaman bergulir secara vertikal di elemen. Kemudian, kemudian klien; // simpan posisi dari The Finger = Touch.Clienty;

Geser jari Anda di layar, dan pindahkan jari Anda ke halaman

 _Container.addeventListener (touchmove, function (e) {// e.preventdefault (); // anotasi kode baris ini akan mencegah halaman dalam elemen bergulir secara vertikal. Jari meluncur dalam arah x var deltay = sentuh.clienty -tarty; menjadi kiri dan kanan. elemen kiri dan kanannya pada saat yang sama bergerak (translate);

Saat jari Anda meninggalkan layar, perhitungan akhirnya akan tetap di halaman mana

 _Container.addeventListener (touchend, function (e) {// e.preventdefault (); // pembatalan kode baris ini akan mencegah halaman gulir vertikal di elemen // Hitung jari waktu untuk tetap di layar var deltat = tanggal baru (). Apakah jaraknya, berapa jarak antara jarak geser. Dari 50%dari layar, kembali ke halaman sebelumnya jika (math.abs (translate)/_itemwidth <0,5) {isrollback = true;} else {// jika jarak geser 50%lebih besar dari layar, geser ke ke Halaman selanjutnya translate = translate <0? -_itemwidth;

Untuk memfasilitasi penggunaan, saya merangkum seluruh proses implementasi ke dalam perpustakaan dan menambahkan metode prev (), next (), yang sangat sederhana:

 <Script src = lib/carousel.js> </script> createCarousel (carousel, it, true) .bindtouchevent () .setitemchangedhandler (Onpagechangeded); // Apakah pengaturan parameter ketiga perlu dimainkan oleh siklus, true dimainkan oleh siklus

Di atas adalah semua isi artikel ini.