Membuat image rotator dengan JQuery

Kali ini mimin mau share cara buat image rotator dengan JQuery. Bentuknya sih sama seperti gallery image dengan fade efek. Kodenya simple kok..

Berikut kodenya :

<title>jQuery Image Rotator</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
// create the image rotator
setInterval("rotateImages()", 2000);
});

function rotateImages() {
var oCurPhoto = $('#photoShow div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#photoShow div:first');

oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass('previous');
});
}
</script>

CSS nya :

<style type="text/css">
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>

HTML nya :

<h1>jQuery-based Image Rotator</h1>
<div id="photoShow">
<div class="current">
<img src="images/Grass.jpg" alt="Photo Gallery" width="400"
height="400" class="gallery" />
</div>
<div>
<img src="images/Leaf.jpg" alt="Photo Gallery" width="400"
height="400" class="gallery" />
</div>
<div>
<img src="images/Spring.jpg" alt="Photo Gallery" width="400"
height="400" class="gallery" />
</div>
<div>
<img src="images/Water.jpg" alt="Photo Gallery" width="400"
height="400" class="gallery" />
</div>
</div>

Cek Demo disini
Download script lengkap disini

Terimakasih