There are some jQuery plugins such as jQuery Cycle Plugin which makes website animation simple. The following HTML is a sliding div example without using other plugins. it maybe not good for use but it would be a nice example for beginners to try the power of jQuery.
<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;
}
.moving-div {
width: 100px;
height: 100px;
float: right;
position: relative;
}
.moving-div-1 {
background-color: red;
}
.moving-div-2 {
background-color: orange;
}
.moving-div-3 {
background-color: yellow;
}
.moving-div-4 {
background-color: green;
}
.moving-div-5 {
background-color: blue;
}
</style>
<script type="text/javascript">
var timer;
var temp;
var offset;
$(document).ready(function() {
timer = setTimeout(startSlide, 3000);
});
function startSlide() {
$(".moving-div").animate(
{right: '+=100px'},
2000,
"linear",
endSlide
);
}
function endSlide() {
temp = parseInt($(this).attr('value')) + 100;
$(this).attr('value', temp);
offset = $(this).attr('value');
if (offset >= 500) {
$(this).attr('value', 0);
if ($(this).is('.moving-div-1')) {
$(this).animate(
{right: '0px'},
1000
);
} else if ($(this).is('.moving-div-2')) {
$(this).animate(
{right: '-100px'},
1000
);
} else if ($(this).is('.moving-div-3')) {
$(this).animate(
{right: '-200px'},
1000
);
} else if ($(this).is('.moving-div-4')) {
$(this).animate(
{right: '-300px'},
1000
);
} else if ($(this).is('.moving-div-5')) {
$(this).animate(
{right: '-400px'},
1000
);
}
timer = setTimeout(startSlide, 3000);
}
}
</script>
</head>
<body>
<div class="main">
<div class="moving-div moving-div-1" value="0">
</div>
<div class="moving-div moving-div-2" value="100">
</div>
<div class="moving-div moving-div-3" value="200">
</div>
<div class="moving-div moving-div-4" value="300">
</div>
<div class="moving-div moving-div-5" value="400">
</div>
</div>
</body>
</html>
If you want to reverse the direction, just replace all the left with right.
Done =)
Eureka! 