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 :)

Dengan memasukan alamat email dibawah ini berarti anda akan mendapat kiriman artikel terbaru dari o-om.com di inbox anda:

Beri vote untuk nilai artikel ini: