Rumah >hujung hadapan web >tutorial js >js untuk melaksanakan penukaran rawak imej latar belakang pada halaman web kemahiran javascript

js untuk melaksanakan penukaran rawak imej latar belakang pada halaman web kemahiran javascript

WBOYasal: 2016-05-16 16:32:202328semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan penukaran rawak imej latar belakang pada halaman web menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Pertama sekali, sediakan beberapa imej Saiz imej (sama ada saiz atau saiz data) mesti dikawal dengan baik Jika terlalu besar, pengguna tidak akan dapat menunggu untuk melihat imej penuh melompat keluar. Jika ia terlalu kecil, ia akan menjejaskan kualiti halaman

Kompilasikan imej ini ke dalam tatasusunan dalam skrip untuk memudahkan panggilan. Panjang tatasusunan sudah tentu bilangan imej.

Salin kod Kod adalah seperti berikut:

var bodyBgs = []; //Buat pembolehubah tatasusunan untuk menyimpan laluan Imej latar belakang 

bodyBgs[0] = "images/01.jpg";

bodyBgs[1] = "images/02.jpg";

bodyBgs[2] = "images/03.jpg";

bodyBgs[3] = "images/04.jpg";

bodyBgs[4] = "images/05.jpg";

Oleh kerana 5 imej telah digunakan di atas, nombor rawak dari 0 hingga 4 perlu dijana di sini. Jika panjang tatasusunan berbeza, cuma ubah suai pengganda dalam kod di bawah.

Salin kod Kod adalah seperti berikut:

var randomBgIndex = Math.round( Math.random() * 4 ) ;

Ini adalah program teras. Walaupun ia sangat mudah, ia adalah idea kecil Jika berdasarkan ini, beberapa fungsi lanjutan boleh dibuat melalui pemprosesan. Contohnya: penukaran tema dan persembahan rawak lain, dsb. Di bawah ialah kod JS yang lengkap.

Salin kod Kod adalah seperti berikut: