Membuat Jquery Auto Image Slide Show

Waktu itu teman saya meminta untuk membuat script sederhana untuk slide show beberapa gambar pada halaman web. Walau terdengar  sederhana dan saya bahkan menganggap itu hal yang sulit,,, dan binggunglah bagaiamana caranya. Akhirnya setelah buka sana buka sini, cari sana cari sini ketemu juga,, hehe.. Untuk slide show kita bisa memanfaatkan Jquery dan ini sangat mudah dan sederhana,,, jadi mudah dipelajari..

Yang akan kita lakukan adalah seperti ini:  Slide show yang kita buat adalah efek fade halus tanpa perlu untuk memasukkan tambahan plug-in di atas Jquery. Mari kita lihat XHTML, CSS, dan Javascript Jquery yang membuatnya bekerja.. Selamat berskrip Ria...!!!

=====================================================================
A . SKRIP CSS :
     <div class="rotator">
  <ul>
    <li class="show">
    <a href="javascript:void(0)">
    <img src="images/image-1.jpg" width="500" height="313"  alt="pic1" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-2.jpg" width="500" height="313"  alt="pic2" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-3.jpg" width="500" height="313"  alt="pic3" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-4.jpg" width="500" height="313"  alt="pic4" />
    </a>
    </li>
  </ul>
</div>

The CSS

/* rotator in-page placement */
        div.rotator {
position:relative;
height:345px;
margin-left: 15px;
}
/* rotator css */
div.rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div.rotator ul li img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
}
        div.rotator ul li.show {
z-index:500;
}

=====================================================================
B. JAVA SKRIPT :
: 


//Set the opacity of all images to 0
$('div.rotator ul li').css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$('div.rotator ul li:first').css({opacity: 1.0});

//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

setInterval('rotate()',6000);

}

function rotate() {
//Get the first image
var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

//Un-comment the 3 lines below to get the images in random order

//var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = $( sibs[ rndNum ] );


//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

};



$(document).ready(function() {
//Load the slideshow
theRotator();
$('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});

</script>
=====================================================================

Source code : Download
Demo    :  Look And Feel

Posted in: J-Query And Ajax