This is another jQuery example which i want to share with you. Again, it maybe not good for use but it would be a nice example for beginners to take a quick look on jQuery. Try jQuery Cycle Plugin to get more interesting animation. If you are looking for more jQuery examples, take a look in my previous blog posts.
- jQuery – Sliding div Example
- jQuery – Wrap children div with Page Number and Index
- jQuery UI Drag and Drop Example
Here is my slideshow example.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<style type="text/css">
body {
text-align: center;
}
.main {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.sliding-div {
width: 500px;
height: 300px;
position: absolute;
}
.sliding-div-1 {
background-color: red;
}
.sliding-div-2 {
background-color: orange;
}
.sliding-div-3 {
background-color: yellow;
}
.sliding-div-4 {
background-color: green;
}
.sliding-div-5 {
background-color: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery('.sliding-div').each(function() {
jQuery(this).hide();
});
jQuery('.sliding-div-1').show();
setTimeout(function(){nextSlide(1);}, 0);
});
function nextSlide(index) {
var nextIndex;
if (index == jQuery('.sliding-div').size()) {
nextIndex = 1;
} else {
nextIndex = index + 1;
}
jQuery('.sliding-div-' + index).fadeOut(1000, function() {
jQuery('.sliding-div-' + nextIndex).fadeIn(1000);
});
setTimeout(function(){nextSlide(nextIndex);}, 3000);
}
</script>
</head>
<body>
<div class="main">
<div class="sliding-div sliding-div-1">
</div>
<div class="sliding-div sliding-div-2">
</div>
<div class="sliding-div sliding-div-3">
</div>
<div class="sliding-div sliding-div-4">
</div>
<div class="sliding-div sliding-div-5">
</div>
</div>
</body>
</html>
Done =)
Reference: jQuery Cycle Plugin
Eureka! 