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.

Lihat preview dari contoh banner slideshow.

Posted on August 6th, 2011 in JavaScript triks by Masim man

Post a comment

15 Responses to “Membuat Banner Slideshow dengan JavaScript”

  1. arda said:

    cuma ini aja yang di copy bro….??
    sumpah pala gw udah mau pecah nih belajar HTML

  2. Terimakasih Ilmunya, mau coba dulu, tolong bantu ya kalau ada kendala…

  3. Symbian plus said:

    Mantep brader

  4. poles marmer said:

    thank untuk ilmunya,,,semoga bermanfaat

  5. ViviGo said:

    mas bisa lebih jelas,, agak kurang paham bisa komunikasi 2 arah dari YM atau apa yg lebih fleksibel
    itupun kalau masny mau thanks

  6. kurang paham gan baiknya dikasi tulisan atau tanda panah merah dimana posisi kodenya dipaste biar ga bingung buat kami pemula

    • Masim man said:

      Sorry, gak tau lagi gimana mau menjelaskannya. Soalnya Scriptnya itu cuma ada 2 dan dimasukkan di dalam head kemudian menyelipkan div di dalam body sebagai lokasi dimana bannernya akan ditampilkan.

  7. Rudi said:

    Masih pusing nih blom mudeng cara penempatan sama buat masukin gambarnya, bisa ga bro…buat semple cara penempatannya?

    • Masim man said:

      Dari contoh banner slideshow lihat aja kode sumber (page source) untuk melihat dimana saya memasukkan div id=”my-banner”.

      Sedangkan untuk gambar cukup mengganti myBanner.add(‘#’, ‘banner1’); dengan mengganti tanda “#” dengan link tujuan dari banner kemudian “banner1” adalah lokasi gambar (bisa dengan direct link).

  8. huda said:

    nice inpo…
    berkreasi trus mas….smoga barokah….

  9. Terima Kasih Mas atas ilmunya,,

  10. Alat Safety said:

    Makasih pak, jadi nambah ilum nih 🙂

  11. Alin said:

    terima kasih banyak tutorialnya mas,,,sangat membantu sy yg sdg belajar website.

  12. sinta said:

    Terimakasih, tutorialnya bermanfaat banget nanti di coba deh…

    Sekarang ini hampir setiap pekerjaan menuntut kita untuk menggunakan komputer dan berbagai software penunjang. Mulai dari software pengolah kata, angka, program, dan desain grafis. Bingung cara belajarnya? Kunjungi Kumpulan Tutorial Gratis , berbagai konten tutorial gratis yang bisa membantu kamu

Back to top