Bagaimana untuk mencapai kesan putaran imej dengan javascript

Dengan perkembangan Internet, karusel imej telah menjadi bahagian yang sangat diperlukan dalam reka bentuk web. JavaScript ialah salah satu alat yang paling penting apabila melaksanakan putaran imej. Artikel ini akan memperkenalkan cara menggunakan javascript untuk melaksanakan kesan paparan roda gambar yang ringkas tetapi berkuasa.

1. Prinsip Pelaksanaan

Prinsip asas penggiliran gambar adalah untuk menukar gambar yang dipaparkan secara berterusan, dengan itu membawa pengalaman visual yang berbeza kepada pengguna. Apabila menggunakan JavaScript untuk melaksanakan penggiliran imej, kita boleh melakukannya melalui langkah berikut:

1.

2. Dapatkan bekas imej dan butang kawalan melalui DOM.

3. Tetapkan pemasa, tukar gambar yang dipaparkan secara berterusan dan ubah suai status butang kawalan.

2. Pelaksanaan Kod

Sebelum kita mula menulis kod, mari kita lihat struktur HTML:

<img src="img/1.jpg" alt="img1"/>
<img src="img/2.jpg" alt="img2"/>
<img src="img/3.jpg" alt="img3"/>

<button class="btn active"></button>
<button class="btn"></button>
<button class="btn"></button>

Kami menggunakan bekas div untuk memuatkan imej yang perlu diputar, dan gunakan bekas div lain untuk meletakkan butang kawalan putaran.

Seterusnya, kami akan menggunakan javascript untuk melaksanakan kesan paparan roda. Kod khusus adalah seperti berikut:

var images = document.querySelectorAll('.img-container img'),

buttons = document.querySelectorAll('.btn'),
currentIndex = 0;

//Tukar imej
suis fungsiImages(indeks) {

for (var i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
    buttons[i].className = 'btn';
}
images[index].style.display = 'block';
buttons[index].className = 'btn active';

}

//Pemasa
setInterval(function() {

currentIndex = (currentIndex + 1) % images.length;
switchImages(currentIndex);

}, 3000);

Dalam kod di atas, kami memperoleh gambar dan butang karusel yang perlu dipaparkan secara statik melalui querySelectorAll, dan mentakrifkan currentIndex pembolehubah untuk merekodkan nombor siri gambar yang sepatutnya dipaparkan pada masa ini. Dalam suis fungsiImej untuk menukar gambar, kami mula-mula menetapkan status semua gambar dan butang kepada 'tiada' dan status normal, dan kemudian memaparkan semula gambar untuk dipaparkan dan menukar status butang yang sepadan mengikut indeks parameter yang diluluskan. Akhir sekali, tetapkan fungsi dalam setInterval untuk melaksanakan penukaran gambar setiap 3 saat, dan tingkatkan nilai currentIndex sebanyak 1 setiap kali untuk mengelakkan gelung tak terhingga.

3. Pengoptimuman dan suplemen

Kod di atas sudah dapat merealisasikan fungsi asas putaran imej, tetapi kami juga boleh mengoptimumkan dan menambahnya. Contohnya, menambah fungsi seperti kesan peralihan atau pratonton lakaran kecil boleh menjadikan paparan roda lebih jelas, cantik dan praktikal.

1. Tambah kesan peralihan

Kami boleh menambah kesan peralihan pada imej melalui atribut peralihan CSS3 Kodnya adalah seperti berikut:

.img-container img {<.>

position: absolute;
top: 0;
left: 0;
transition: all ease-in-out .5s;

}

.img-container img.hide {

opacity: 0;
z-index: 1;

}

Dalam kod di atas, kami menetapkan gaya imej kepada kedudukan mutlak dan nyatakannya menggunakan atribut peralihan Masa dan kesan animasi peralihan. Kemudian, kami mengubah suai nama kelas imej yang tersembunyi sebelum ini untuk 'menyembunyikan' dalam fungsi switchImages untuk mencetuskan kesan peralihan CSS3. Ambil perhatian bahawa kita perlu menangguhkan pelaksanaan kod yang mengubah suai gaya, jika tidak, kesan CSS3 tidak akan berkuat kuasa.

//Tukar imej

suis fungsiImej(indeks) {

for (var i = 0; i < images.length; i++) {
    images[i].className = '';
    buttons[i].className = 'btn';
}
images[currentIndex].className = 'hide';
setTimeout(function() {
    images[index].className = 'show';
}, 100);
currentIndex = index;
buttons[currentIndex].className = 'btn active';

}

2. Tambah pratonton lakaran kecil

Kami juga boleh Tambah pratonton lakaran kenit ke butang kawalan paparan roda untuk memudahkan pengguna melihat gambar yang ingin mereka paparkan. Kod khusus adalah seperti berikut:

//Buat pratonton lakaran kecil

untuk (var i = 0; i < buttons.length; i++) {

buttons[i].style.backgroundImage = "url(" + images[i].src + ")";

}

/ /Acara pergerakan tetikus
untuk (var j = 0; j < buttons.length; j++) {

buttons[j].onmouseover = function(e) {
    var index = e.target.getAttribute('index');
    switchImages(index);
}

}

Dalam kod di atas, kami menggunakan javascript untuk setiap Imej latar belakang ditetapkan untuk setiap butang karusel, dan peristiwa pergerakan tetikus digunakan untuk mencetuskan fungsi menukar imej. Melalui fungsi ini, pengguna boleh terus melihat lakaran kecil imej yang akan dipaparkan pada panel kawalan karusel, yang meningkatkan pengalaman pengguna.

4. Ringkasan

Menggunakan javascript untuk mencapai kesan putaran imej, kita bukan sahaja boleh meningkatkan keindahan dan kepraktisan halaman web, tetapi juga memperoleh pemahaman yang mendalam tentang aplikasi javascript dalam pembangunan web. Cuba gunakan kod yang diterangkan dalam artikel ini untuk menambah kesan paparan roda gambar pada halaman web anda sendiri untuk memberikan pengguna pengalaman yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan putaran imej dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!