Powered byBlog Widgetand shared by JUNIAWAN89

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
Previous
Next Post »

Pengunjung yang baik selalu memberikan masukan / komentar.... ConversionConversion EmoticonEmoticon

Popular