Membuat Banner Slideshow dengan JavaScript

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 "banner-slideshow.js".

/* Source Script http://javascript.internet.com Created by: Scragar | Licensed under: Public Domain */

function BannerSlideshow(){

// first, defaults:

  this.timer = 2;

  this.bannerNum = 0;// -1 = random

// then normal init work

  this.banners = [];

  this.binding = null;

  this.timeout = null;

  this.add = function(){// add a banner to the array

    this.banners[this.banners.length] = [arguments[0], arguments[1]];

  this.bind = function(){// bind to an element

    if(typeof arguments[0] == 'string')

      this.binding = document.getElementById(arguments[0]);

    else

      this.binding = arguments[0];

    this.rotate();

  this.rotate = function(){// the actual image rotator

    if( ! this.empty())

      return;

    var showNum, tmpA = document.createElement('a'), tmpImg = document.createElement('img');

    if(this.bannerNum < 0)// random

      showNum = Math.floor(Math.random()*this.banners.length);

    else// syncronous

      showNum = this.bannerNum=(++this.bannerNum >= this.banners.length)?0:this.bannerNum;

    tmpA.href = this.banners[showNum][0];

    tmpImg.src = this.banners[showNum][1];

    tmpA.appendChild(tmpImg);

    this.binding.appendChild(tmpA);

  this.empty = function(){// empty the element if possible

    if(this.binding == null)

      return false;

    while(this.binding.hasChildNodes())

      this.binding.removeChild(this.binding.firstChild);

    return true;

  this.startTimer = function(){// start the loop, normaly done during page load.

    this.stopTimer();

    this.timeout = window.setInterval(

      (function(x){

        return function(){

          x.rotate();

      })(this), this.timer*1000);

  this.stopTimer = function(){// stop the loop, nice to make available via a button.

    if(this.timeout != null)

      window.clearInterval(this.timeout);

    this.timeout = null;

Setelah disimpan sekarang masukkan kedua kode JavaScript berikut di antara tag <head>, untuk script yang pertama sesuaikan ke lokasi dimana banner-slideshow.js tadi anda simpan:
JavaScript 1:

<script type="text/javascript" src="banner-slideshow.js"></script>

JavaScript 2:

<script type="text/javascript">

<!––

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      if (oldonload) {

        oldonload();

      func();

// Banner

var myBanner = new BannerSlideshow();

myBanner.add('#', 'banner1');

myBanner.add('#', 'banner2');

myBanner.add('#', 'banner3');

myBanner.add('#', 'banner4');

myBanner.timer = x;// x detik pergantian gambar.

// Set-up display

addLoadEvent(function(){

  myBanner.bind('my-banner');// nama id dari lokasi banner.

  myBanner.startTimer();

});

//––>

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

myBanner.add('#', '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:

myBanner.timer = x;

Adalah untuk mengatur rotasi atau pergantian banner dalam satuan detik.

1 komentar:

agentaruhanbolavita said...: Nikmati Serunya Bermain Tembak Ikan Online Di Agen Terpercaya!
Raih Keberuntungan & Menangkan Jackpot Jutaan Rupiah..
Yuk Gabung Bersama Bolavita Di Website www. bolavita. club

Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WeChat: BOLAVITA
WA: +6281377055002
Line : cs_bolavita; November 6, 2018 at 6:01 PM

Strategi Membangun Media Online