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;

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';

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);
}

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!