Cara Membuat Banner Slideshow dengan
JavaScript
Nah kali ini Gagaje akan coba share cara membuat Banner Slideshow dengan menggunakan
JavaScript berikut ini akan menampilakan banner serta link-nya masing-masing secara
bergantian dengan waktu yang dapat kita tentukan sendiri.
Setelah dicoba dan di test, script ini dapat tampil dengan baik di Intenet Explorer, Mozilla
Firefox, Google Chrome, Opera dan Safari.
Berikut adalah langkah-langkah untuk membuat Banner Slideshow dengan JavaScript.
Yang pertama kita lakukan adalah menyalin kode berikut ke Notepad kemudian simpan dengan
nama "[Link]".
/* Source Script [Link] Created by: Scragar | Licensed under: Public
Domain */
function BannerSlideshow(){
// first, defaults:
[Link] = 2;
[Link] = 0;// -1 = random
// then normal init work
[Link] = [];
[Link] = null;
[Link] = null;
[Link] = function(){// add a banner to the array
[Link][[Link]] = [arguments[0], arguments[1]];
}
[Link] = function(){// bind to an element
if(typeof arguments[0] == 'string')
[Link] = [Link](arguments[0]);
else
[Link] = arguments[0];
[Link]();
}
[Link] = function(){// the actual image rotator
if( ! [Link]())
return;
var showNum, tmpA = [Link]('a'), tmpImg =
[Link]('img');
if([Link] < 0)// random
showNum = [Link]([Link]()*[Link]);
else// syncronous
showNum = [Link]=(++[Link] >= [Link])?0:[Link];
[Link] = [Link][showNum][0];
[Link] = [Link][showNum][1];
[Link](tmpImg);
[Link](tmpA);
}
[Link] = function(){// empty the element if possible
if([Link] == null)
return false;
while([Link]())
[Link]([Link]);
return true;
}
[Link] = function(){// start the loop, normaly done during page load.
[Link]();
[Link] = [Link](
(function(x){
return function(){
[Link]();
}
})(this), [Link]*1000);
}
[Link] = function(){// stop the loop, nice to make available via a button.
if([Link] != null)
[Link]([Link]);
[Link] = null;
}
}
Setelah disimpan sekarang masukkan kedua kode JavaScript berikut di antara tag <head>, untuk
script yang pertama sesuaikan ke lokasi dimana [Link] tadi anda simpan:
JavaScript 1:
<script type="text/javascript" src="[Link]"></script>
JavaScript 2:
<script type="text/javascript">
<!––
function addLoadEvent(func) {
var oldonload = [Link];
if (typeof [Link] != 'function') {
[Link] = func;
} else {
[Link] = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// Banner
var myBanner = new BannerSlideshow();
[Link]('#', 'banner1');
[Link]('#', 'banner2');
[Link]('#', 'banner3');
[Link]('#', 'banner4');
[Link] = x;// x detik pergantian gambar.
// Set-up display
addLoadEvent(function(){
[Link]('my-banner');// nama id dari lokasi banner.
[Link]();
});
//––>
</script>
Kemudian masukkan kode berikut di antara tag <body> ke lokasi dimana kita akan menampilkan
banner.
<div id="my-banner"></div>
Untuk menghilangkan border gambar di IE serta untuk pengaturan elemen div diatas tambahkan
style berikut ke dalam CSS.
img{border:none;}
#my-banner{margin:0;} /*pengaturan CSS untuk banner*/
Selanjutnya kita akan mengatur link, gambar banner dan waktu dari rotasi banner dengan
mengedit JavaScript yang kedua diatas.
Yang perlu kita ubah adalah:
[Link]('#', 'banner1');
Caranya dengan mengganti "#" dengan link tujuan dari banner kemudian "banner1" adalah link
ke lokasi gambar. Untuk gambar bisa menggunakan jpg, gif atau png.
Kemudian kita dapat menambah atau mengurangi banner tersebut tergantung dengan jumlah
banner yang kita inginkan. Seperti contoh diatas adalah untuk 4 banner.
Selanjutnya:
[Link] = x;
Adalah untuk mengatur rotasi atau pergantian banner dalam satuan detik.
Selamat mencoba dan semoga bermanfaat...
Tips tambahan, jangan memuat gambar yang terlalku besar, karena akan berpengaruh pada
Loading blog sobat..kalau saya pribadi sih tidak terlalu suka dengan Slidshow ini..