Random Photo tanpa reload page (Slideshow)

Informasi : Code ini
tidak suport pada blogger sebaiknya jangan digunakan, thanks

 

Pada artikel sebelumnya sudah saya jelaskan bagaimana cara membuat

Random Banner Pada Satu Area dimana kita dapat menampilkan
gambar banner secara random (acak) pada area yang sama, sayangnya untuk
menampilkan gambar dengan cara ini kita harus melakukan reload page atau
refresh page, kali ini kita akan membuat kode javascript untuk menampilkan
gambar "Random Photo tanpa reload page (Slideshow)" yang berarti
kita akan menampilkan gambar pada satu area tanpa perlu  melakukan reload page sama sekali.

Mungkin rekan akan bertanya apa hubungannya "Random Photo
tanpa reload page (Slideshow)" dengan "Manajemen
iklan : Random Banner Pada satu Area" kesamaan yang tampak tentu saja kedua
cara ini sama-sama untuk menampilkan gambar secara Random, yang membedakan
hanyalah kegunaan saja, bisa untuk
manampilkan Photo, Banner atau apalah terserah mau di pasang gambar apa saja :)

Contoh Penggunaan Kode:

Kode I:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var mfBanners = [

['Alamat URL', 'Alamat
URL Gambar'],

['Alamat URL', 'Alamat
URL Gambar''],

['Alamat URL', 'Alamat
URL Gambar''],

['Alamat URL', 'Alamat
URL Gambar''],

['Alamat URL', 'Alamat
URL Gambar'']];

var mfIe = false;

if( document.all) {

mfIe = true;

}

var mfBannerIndex = 0;

function mfBannerChange() {

var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'"> <img
border="0" src="'+mfBanners[mfBannerIndex][1]+'"></a>';

if( mfIe) {

document.all.banner.innerHTML = htmlString;

}

else {

document.layers["banner"].document.open();

document.layers["banner"].document.write( htmlString);

document.layers["banner"].document.close();

}

if(mfBannerIndex < mfBanners.length - 1)

mfBannerIndex++;

else

mfBannerIndex = 0;

}

setInterval("mfBannerChange()", 5000);

// End -->

</script>

Kode II

<div id="banner" style="position:absolute;
top:0;
left:0;"></div>

Penjelasan

['Alamat
URL', 'Alamat URL
Gambar''],  ->>
Untuk menambah gambar yang ditampilkan kita tinggal menambahkan saja
alamatnya

5000 -->> ini merupakan durasi
tampilan gambar yang berarti gambar akan berubah setelah 5 detik berikutnya.

 

Selamat Mencoba, Happy Blogging :)