Artikel ini menjelaskan metode pengalihan gambar latar belakang secara acak pada JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Pertama -tama, Anda perlu menyiapkan beberapa gambar. Ukuran gambar (apakah ukuran atau ukuran data) harus dikontrol dengan baik. Jika terlalu besar, itu akan membuat pengguna tidak bisa menunggu untuk melihat gambar lengkap dan melompat keluar. Jika terlalu kecil, itu akan mempengaruhi kualitas halaman.
Porce gambar -gambar ini ke dalam array dalam skrip untuk panggilan mudah. Panjang array tentu saja jumlah gambar.
Salin kode sebagai berikut: var bodybgs = []; // Buat variabel array untuk menyimpan jalur ke gambar latar belakang
Bodybgs [0] = "gambar/01.jpg";
Bodybgs [1] = "gambar/02.jpg";
Bodybgs [2] = "gambar/03.jpg";
Bodybgs [3] = "gambar/04.jpg";
Bodybgs [4] = "gambar/05.jpg";
Karena 5 gambar digunakan di atas, angka acak dari 0 hingga 4 perlu dihasilkan di sini. Jika panjang array berbeda, cukup ubah pengganda dalam kode berikut.
Salinan kode adalah sebagai berikut: var randombgindex = math.round (math.random () * 4);
Ini adalah program inti. Meskipun sangat sederhana, itu adalah ide kecil. Jika Anda menggunakan ini sebagai dasar, beberapa fungsi yang diperluas dapat dilakukan melalui pemrosesan. Misalnya: switching topik dan presentasi acak lainnya, dll. Di bawah ini adalah kode JS lengkap.
Salin kode sebagai berikut: <script type = "text/javascript">
// <! Cdata [
var bodybgs = [];
Bodybgs [0] = "gambar/01.jpg";
Bodybgs [1] = "gambar/02.jpg";
Bodybgs [2] = "gambar/03.jpg";
Bodybgs [3] = "gambar/04.jpg";
Bodybgs [4] = "gambar/05.jpg";
var randombgindex = math.round (math.random () * 4);
// output gambar latar belakang acak
document.write ('<tyle> body {background: url (' + Bodybgs [randombgindex] + ') No-Repeat 50% 0} </tyle>');
//]]>
</script>
Saya berharap deskripsi dalam artikel ini akan bermanfaat untuk pemrograman web semua orang berdasarkan JavaScript.