Wednesday, September 5, 2012

simple jQuery rotator

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