kod putaran imej javascript

Kod putaran imej JavaScript

Dalam pembangunan web, putaran imej merupakan fungsi yang sering digunakan. Contohnya, dalam senario seperti paparan produk dan gambar karusel, kita perlu memaparkan berbilang gambar dan menukar gambar pada selang waktu tertentu. Dalam JavaScript, kita boleh melaksanakan fungsi putaran imej melalui beberapa kod mudah.

Idea

Terdapat banyak cara untuk melaksanakan penggiliran imej Artikel ini akan memperkenalkan kaedah berdasarkan sintaks asli JavaScript adalah seperti berikut:

1 . , kita perlu menyediakan senarai gambar untuk diputar, dan kita boleh menggunakan tatasusunan untuk menyimpan maklumat gambar.

2. Seterusnya, kita perlu menentukan pembilang untuk merakam gambar dalam senarai gambar semasa.

3 Kemudian, kami boleh menambah imej secara dinamik pada halaman dengan memanggil API DOM JavaScript.

4 Akhir sekali, kita perlu menetapkan pemasa untuk mengemas kini kaunter sekali-sekala dan bertukar untuk memaparkan gambar seterusnya.

Langkah Pelaksanaan

Pertama, kita perlu menyediakan senarai imej. Di sini, kita boleh menggunakan tatasusunan JavaScript untuk menyimpan maklumat imej Setiap elemen dalam tatasusunan ialah objek, termasuk url dan alt imej.

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

Seterusnya, kami mentakrifkan pembolehubah pembilang currentIdx untuk merekodkan nombor siri imej yang sedang dipaparkan. Oleh kerana pengindeksan tatasusunan bermula pada 0, nilai awal currentIdx hendaklah 0.

let currentIdx = 0;

Kemudian, kami boleh mencipta elemen img secara dinamik melalui API DOM JavaScript dan menambahkannya pada halaman.

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

Perlu diambil perhatian bahawa elemen img yang baru dibuat ditambah pada elemen dengan id imgWrapper Kita perlu mentakrifkan elemen ini dalam halaman terlebih dahulu.

<div id="imgWrapper"></div>

Seterusnya, kita perlu menetapkan pemasa untuk bertukar kepada gambar seterusnya setiap masa tertentu. Dalam JavaScript, kita boleh mencapai ini melalui fungsi setTimeout atau setInterval. Di sini kami memilih untuk menggunakan setInterval.

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

Dalam kod di atas, parameter pertama fungsi setInterval ialah fungsi tanpa nama Fungsi ini digunakan untuk mengemas kini nombor siri dan maklumat imej bagi imej semasa, dan menetapkannya kepada src dan alt daripada sifat img. Parameter kedua ialah selang masa pemasa, dalam milisaat. Sebagai contoh, dalam kod di atas, fungsi tanpa nama akan dilaksanakan setiap 3000 milisaat (iaitu, 3 saat).

Akhir sekali, kita perlu mengosongkan pemasa apabila halaman dipunggah, jika tidak, ia boleh menyebabkan kebocoran memori.

window.onunload = function() {
    clearInterval(intervalId);
};

Kod lengkap

Mengintegrasikan kod di atas, kami mendapat kod putaran imej lengkap berdasarkan sintaks asli JavaScript.

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

let currentIdx = 0;

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

window.onunload = function() {
    clearInterval(intervalId);
};

Ringkasan

Dalam artikel ini, kami memperkenalkan kepada anda kod penggiliran imej yang dilaksanakan menggunakan sintaks asli JavaScript. Dengan mengkaji artikel ini, anda boleh mempelajari cara menggunakan tatasusunan JavaScript, API DOM dan pemasa untuk melaksanakan penggiliran imej. Sudah tentu, kod ini hanyalah kod asas dan anda boleh mengubah suai dan mengoptimumkannya mengikut keperluan sebenar.

Atas ialah kandungan terperinci kod putaran imej javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!