image_rotator_jquery

How To Create a Simple Image Rotator With Using jQuery

How To Create a Simple Image Rotator With Using jQuery.

Click here to see the demo

The Code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Rotator</title>
<script type="text/javascript" src="jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
$(function() {
setInterval("rotateImages()", 3000);
});
function rotateImages() {
var curPhoto = $("#photoshow div.current");
var nextPhoto = curPhoto.next();
if(nextPhoto.length == 0) {
nextPhoto = $("#photoshow div:first");
}
curPhoto.removeClass('current').addClass('previous');
nextPhoto.css({opacity:0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {
curPhoto.removeClass('previous');
});

}
</script>
<style>
#photoshow {
width:600px;
height: 500px;
border:2px solid #000;
overflow:hidden;

}
#photoshow div {
position:absolute;
z-index:0;
width:600px;
height: 500px;
overflow:hidden;
}
#photoshow div.previous {
z-index: 1;
}
#photoshow div.current {
z-index: 2;
}
</style>
</head>

<body>
<div id="photoshow">
<div class="current">
<img src="images/001.jpg" width="1280" height="853" />
</div>
<div>
<img src="images/002.jpg" width="1280" height="853" />
</div>
<div>
<img src="images/007.jpg" width="1280" height="853" />
</div>
<div>
<img src="images/008.jpg" width="1280" height="853" />
</div>
</div>
</body>
</html>


One thought on “How To Create a Simple Image Rotator With Using jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *