This is a simple jQuery rotator for banners.
jQuery:
<script type="text/javascript">
jQuery(function(){
setInterval("rotate()",3000);
});
function rotate(){
var a=jQuery("#con div.current");
var b=a.next();
if(b.length==0)
b=jQuery("#con div:first");
a.removeClass("current").addClass("prev");
b.css({opacity:0.0}).addClass("current").animate({opacity:1.0},1000,
function(){
a.removeClass("prev");
});
setTimeout(function(){
},1500);
}
</script>
css:
<style type="text/css">
#con img{min-width:500px;min-height:200px;width:100%;position:relative;}
#con div{z-index:0;position:absolute;width:500px;height:200px;}
#con div.prev{z-index:1;}
#con div.current{z-index:2;}
</style>
html:
<div id="con">
<div><img src="image1.jpg"></div>
<div><img src="image2.jpg"></div>
<div><img src="image3.jpg"></div>
<div><img src="image4.jpg"></div>
<div><img src="image5.jpg"></div>
</div>
No comments:
Post a Comment