Membuat Animasi Image Rotator Dengan JQuery

Artikel kali ini akan membahas tentang animasi image yang sering di gunakan pada setiap sisi halaman website, yaitu image rotator. Image rotator adalah cara menampilkan daftar image yang diganti satu per satu dalam suatu periode. Animasi ini biasanya di pasang pada space banner di dalam halaman website, agar pengunjung dapat melihat satu per satu secara bergantian produk yang di tawarkan pada banner tersebut.
Untuk membuat efek image rotator dengan JavaScript biasa tentu akan sulit, namun dengan bantuan jQuery anda tidak perlu menulis banyak kode, karena efek animasi seperti fadeIn (menampilkan perlahan-lahan) dan fadeOut (menyembunyikan perlahan-lahan) sudah disediakan oleh library jQuery standar.

Berikut adalah source code untuk melakukan image rotator dengan jQuery (masukan kode di bawah diantara tag HEAD).

<script type="text/javascript" src="../jquery.js"></script>
  <script type="text/javascript">
    // tentukan lokasi atau directory gambar-gambar yang akan di load
    var imageDirectory = './'; 
    /* tentukan gambar-gambar yang ingin di load dalam lokasi yang sudah di tentukan sebelumnya
    tidak ada batasan berapa banyak anda memasukan gambar */
    var imageList = ['slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg'];
 
    // flag yang digunakan untuk mendeteksi berapa banyak gambar yang sudah di load
    var imageHasLoad = 0;
 
    // flag yang digunakan untuk melakukan rotator berdasar urutan gambar
    var imagePosition = 0;
 
    /* pre-load image, agar gambar-gambar yang ingin ditampilkan sudah di load 
       sebelum halaman web di load secara keseluruhan */ 
    $(imageList).each( // looping isi array gambar
        function(){
            var Img = new Image(); // buat object gambar di javascript
            Img.src = imageDirectory+this // lokasi gambar di tentukan dari masing-masing nilai array yang sudah ditentukan sebelumnya
            $(Img).load( // membuat fungsi ketika gambar selesai di load
              function(){
                  imageHasLoad++; // setup flag berapa banyak gambar yang sudah di load
                  if(imageHasLoad == imageList.length) // jika semua gambar selesai di load
                      insertImages(); 
              }
            );      
        }
    ); 
    // fungsi untuk memasukan HTML TAG gambar di dalam sebuah elemen DIV 
    function insertImages(){
        var imgStr = '';
        $(imageList).each( // looping isi array gambar
           function(){
           // gambar secara default di sembunyikan terlebih dahulu 
              imgStr += '<img src="'+imageDirectory+this+'" border="0" style="display:none" />'; 
           }
        );
        $('#divSlideShow').html(imgStr); // masukkan semua HTML TAG gambar ke dalam element dengan ID #divSlideShow
        rotateImages(); // lakukan animasi rotator
    }  
    // fungsi untuk melakukan rotator 
    function rotateImages(){
        /* logika pada fungsi ini adalah sembuyikan image yang sudah tampil sebelumnya, lalu setelah selesai di sembunyikan
     maka tampilkan image selanjutnya. Menyembunyikan dan menampilkan image dengan fungsi fadeOut dan fadeIn dari jQuery */
     $($('#divSlideShow').find('img')[imagePosition > 0 ? imagePosition - 1 : imageList.length - 1]).fadeOut(
         'slow',
   function(){ // fungsi yang akan dijalankan setelah gambar sebelumnya selesai disembuyikan
    $($('#divSlideShow').find('img')[imagePosition]).fadeIn();
   }
     );
     // jika posisi rotator sudah sama dengan jumlah image yang di load sebelumnya, maka kembalikan ke posisi awal atau nol
  if(imagePosition == imageList.length - 1) 
   imagePosition = 0; 
     else 
   imagePosition++; 
     setTimeout('rotateImages()',2000); // lama rotasi per image adalah 2000 miliseconds atau 2 detik
    }
  </script>

Coba perhatikan pada source code diatas ada metoda untuk memanggil gambar secara pre-loading, tujuannya adalah agar gambar-gambar yang akan di load secara diam-diam di load satu per satu sebelum seluruh halaman web selesai di load, jadi pengunjung tidak perlu menunggu lama-lama untuk melihat image rotator anda.
Selama pengunjung menunggu tampilkan saja text “loading image…” atau gambar GIF yang menarik. Masukan kode di bawah diantara tag BODY.

<!-- tampilkan text "loading images" selama pengunjung menunggu hasil pre-load image -->
<div id="divSlideShow">loading images...</div>

Contoh :





Animasi ini dapat anda tempatkan di setiap sisi halaman website sesuai keinginan anda.
Semoga bisa bermanfaat… ^_^