» » Cara Menciptakan Banner Slideshow Dengan Javascript

Cara Menciptakan Banner Slideshow Dengan Javascript

Nah kali ini Gagaje akan coba share cara membuat Banner Slideshow dengan memakai JavaScript diberikut ini akan menampilakan banner serta link-nya masing-masing secara bergantian dengan waktu yang sanggup kita tentukan sendiri.

Sesudah dicoba dan di test, script ini sanggup tampil dengan baik di Intenet Explorer, Mozilla Firefox, Google Chrome, Opera dan Safari.

Berikut yakni langkah-langkah untuk membuat Banner Slideshow dengan JavaScript.

Yang pertama kita lakukan yakni menyalin aba-aba diberikut 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;
  }
}

Sesudah disimpan kini masukkan kedua aba-aba JavaScript diberikut 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 aba-aba diberikut 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 menambahkan style diberikut 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');

Tekniknya dengan mengganti "#" dengan link tujuan dari banner kemudian "banner1" yakni link ke lokasi gambar. Untuk gambar sanggup memakai jpg, gif atau png.

Kemudian kita sanggup menambah atau mengurangi banner tersebut tergantung dengan jumlah banner yang kita inginkan. Seperti pola diatas yakni untuk 4 banner.

Selanjutnya:

myBanner.timer = x;

Adalah untuk mengatur rotasi atau pergantian banner dalam satuan detik.
Selamat mencoba dan semoga bermanfaa...
Tips tambahan, tidakboleh memuat gambar yang terlalku besar, alasannya yakni akan besar lengan berkuasa pada Loading blog sobat dekat..kalau saya langsung sih tidak terlalu suka dengan Slidshow ini..
0 Komentar untuk "Cara Menciptakan Banner Slideshow Dengan Javascript"

Back To Top