javascript - Apakah prinsip karusel hujung ke hujung dalam js?

Question

Karusel am dilaksanakan dengan menukar sebelah kiri bekas induk imej, tetapi bagaimana pula dengan prinsip karusel yang disambungkan dari hujung ke hujung?

Bagaimana untuk mengawal JS?

Answer 1

Izinkan saya bercakap tentang idea saya, saya harap ia dapat membantu anda. Saya menggunakan Jquery.
<ul>
<li><img>1</li>
<li><img>2</li>
<li><img><img> li><img>4</li>
.....
<ul>
Dapatkan semua tag li $("li"). Klik butang gerak kiri atau kanan, dan ul akan bergerak ke kiri dan kanan sebanyak XX piksel (setiap li adalah saiz yang sama, gerakkan lebar satu li)
Letakkan $("li").eq[0] pertama pada kiri dan letakkannya di ul Last (tambahkanKe); bergerak ke kanan meletakkan li terakhir di hadapan (prependTO).
Tambah beberapa kesan animasi animate() untuk menjadikannya kelihatan lebih baik.

Answer 2

Sambung hujung ke hujung, bukan? Saya telah melihat beberapa prinsip karusel yang berkaitan secara amnya, yang pertama ditukar kepada yang kedua dengan bergerak sedikit dengan js Kemudian apabila ia datang kepada yang terakhir, kita boleh menambah satu lagi selepas salinan A daripada gambar, dan kemudian beralih daripada gambar terakhir kepada klon gambar pertama juga adalah sedikit penukaran pergerakan Walau bagaimanapun, selepas penukaran selesai, ia segera ditukar kepada kedudukan gambar pertama yang sebenar, iaitu kiri: 0. Pada masa ini, langkah seterusnya ialah menukar dari gambar pertama ke gambar kedua dengan gembira. - - Saya tertanya-tanya adakah ini yang ditanya oleh penanya?

Answer 3

Beri saya idea

Anda boleh bayangkan setiap gambar dalam komponen karusel sebagai individu bebas, dan bukannya dihubungkan dengan gambar lain secara berturut-turut secara keseluruhan

Setiap kali gambar ditukar, pengguna hanya boleh melihat 2 gambar: gambar semasa dan gambar seterusnya. , kita hanya perlu menyediakan 2 gambar ini dan menetapkan animasi anjakan yang sepadan dengan sambungan hujung ke hujung, letakkan sahaja "kepala" di belakang "ekor" dan kemudian hidupkan ia
.

Begitu juga jika anda ingin menukar kepada gambar sebelumnya, cuma sediakan gambar semasa dan gambar sebelumnya dan tetapkan animasi anjakannya

Juga peringatan, pada mudah alih sebaiknya gunakan

untuk anjakan, yang boleh mendayakan pecutan gpu, jika tidak animasi akan membekutransform: translate3d(x, 0, 0)

Answer 4

Sebenarnya ia sangat mudah. ​​Katakan terdapat lima gambar asli, dan strukturnya adalah seperti berikut:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
<ul>

Anda mengubahnya menjadi:

<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
<ul>

Apabila gambar pertama meluncur ke kiri, tetapkan semula kiri ke gambar kelima selepas animasi tamat, dan sebaliknya!

Answer 5

Imej karusel Saya lebih suka menukar src secara dinamik

Answer 6

Adakah penyoal tahu tentang baris gilir dan tindanan. Jika ya, carta karusel adalah baris gilir, dan elemen yang dinyah gilir dimasukkan semula ke dalam baris gilir.

Answer 7

Gunakan 2 set gambar yang sama dan gerakkannya melalui peralihan dan ubah suai ke kiri.

Apabila dibiarkan ke gambar pertama dalam kumpulan kedua, matikan terus trantition dan kiri ke gambar pertama dalam kumpulan pertama, dan kemudian hidupkan peralihan

Answer 8

Prinsipnya ialah: dengan mengandaikan anda bergerak ke kiri, selepas setiap pergerakan, gerakkan p gambar paling kiri ke kanan, iaitu, gerakkan p pertama ke yang terakhir, dan pada masa yang sama ubah suai nilai kiri bekas besar dan tambahkan lebar imej.

Answer 9

Jika anda menggunakan jquery, anda boleh menggunakan insertAfter dan insertBefore