Membuat effect background gambar pada div bergantian di halaman web

Bagaimana cara membuat atribut background pada div bisa bergantian dengan menggunakan css dan jquery atau javascript selama interval tertentu. misal pertama yang muncul background gambar kucing terus kemudian setelah 5 detik gambar gajah dan seterusnya.

cara membuat efek gambar bergantian dengan menggunakan css dan javascript caranya adalah mudah, ikuti contoh kode berikut ini.

kode html :

<[hapus]div class="header"> 
...
<[hapus]/div>

kode javascript :

<[hapus]script> 
 var i = 0;
 var img = new Array( "bg-1.png", "bg-2.png", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg");

function changeBg() {
 $('.header').css("background-image", "url(images/" + img[i] + " )"); 
 i++;

if(i == img.length) {
 i = 0;
 }

setTimeout(changeBg, 5000);
 }

changeBg();
</script>

keterangan . replace [hapus] .

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s