javascript - penukaran tab swiper Bagaimana saya boleh membuat bekas swiper bergerak dengan mengklik setiap butang?

Question

Penukaran tab swiper Klik setiap butang untuk membuat bekas swiper bergerak

Sebagai contoh, penukaran tab teratas NetEase mengklik setiap butang, dan bekas penukaran tab akan menatal (1: anda boleh menatal ke kiri dan ke kanan, dan kandungan menduduki keseluruhan bekas,)

http://3g.163.com/touch/auto?...

Answer 1

Tatal mendatar .topnav_list

Answer 2

Saya membuat DEMO: https://codepen.io/anon/pen/d...

Ia hanya melaksanakan fungsi asas, dan kedudukan pergerakan tidak begitu tepat untuk kegunaan sebenar, anda perlu melaraskan sendiri jumlah pergerakan.

Prinsipnya adalah untuk menganjak setiap .topnav_item 绑定一个 onClick 的 listener。当点击元素时，取得该元素在 topnav_list 中的 index，然后把 .topnav_list ke kiri sepadan dengan lebar * jarak indeks (bukan nilai yang tepat, ia perlu dilaraskan).

Sesetengah sintaks ES2015 digunakan dalam DEMO Sila beri perhatian kepada keserasian penyemak imbas apabila menggunakannya dalam amalan. Gambar menyelamatkan masalah dengan menggunakan kaedah .scrollLeft() jQuery Anda boleh melaksanakannya sendiri dalam penggunaan sebenar.