<!DOCTYPE html>
<html>
<head>
<!--Included jquery script library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
startRotator("#rotator");
})
//Initialise rotate js
function rotateBanners(elem) {
var active = $(elem+" img.active");
var next = active.next();
if (next.length == 0)
next = $(elem+" img:first");
active.removeClass("active").fadeOut(200);
next.addClass("active").fadeIn(200);
}
function prepareRotator(elem) {
$(elem+" img").fadeOut(0);
$(elem+" img:first").fadeIn(0).addClass("active");
}
function startRotator(elem) {
prepareRotator(elem);
setInterval("rotateBanners('"+elem+"')", 2000);
}
</script>
<!-- Initialise rotate css -->
<style>
#rotator img { position: absolute; }
</style>
</head>
<body>
<!-- Rotator images -->
<div id="rotator">
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Garden.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Green Sea Turtle.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Garden.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Green Sea Turtle.jpg" width="550" />
</div>
</body>
</html>
No comments:
Post a Comment