jquery全屏banner自动轮播切换

By柏小白

jquery全屏banner自动轮播切换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery全屏banner自动轮播切换</title>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
function banner(){  
    var d=0;
    var speed=5000;
    var count=1;
    var time;
    var fouse=$('#banner .d1');
    var dot=$('#banner_id li');
    fouse.hide();
    fouse.eq(0).fadeIn('slow');
    if(fouse.length>0){
        dot.eq(0).addClass('nuw');
        function Carousel(){
            var c=d+1;
            if(c>fouse.length-1){
                c=0;
            }
            fouse.eq(d).css('z-index','2');
            fouse.eq(c).css('z-index','1');
            fouse.eq(c).show();
            fouse.eq(d).fadeOut('slow');
            dot.removeClass('nuw');
            dot.eq(c).addClass('nuw');
            d=c;
        }
        time=setInterval(Carousel,speed);
        dot.click(function(){
            var e=dot.index(this);
            if(e!=d&&count==1){
                count=0;
                fouse.eq(d).css('z-index','2');
                fouse.eq(e).css('z-index','1');
                fouse.eq(e).show();
                fouse.eq(d).fadeOut('slow',function(){count=1});
                dot.removeClass('nuw');
                dot.eq(e).addClass('nuw');
                d=e;
            }
        });
        $('#banner_id').hover(function(){
            clearInterval(time);
        },function(){
            time=setInterval(Carousel,speed);
        });
    }
    else{
        $('#banner').hide();
    }
}
</script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* banner */
.banner{height:400px;overflow:hidden;}
.banner .d1{width:100%;height:392px;display:block;position:absolute;left:0px;top:0px;}
.banner .d2{width:100%;height:30px;clear:both;position:absolute;z-index:100;left:0px;top:360px;}
.banner .d2 ul{float:left;position:absolute;left:50%;top:0;margin:0 0 0 -96px;display:inline;}
.banner .d2 li{width:17px;height:15px;overflow:hidden;cursor:pointer;background:url(images/img1.png) white no-repeat center;float:left;margin:0 3px;display:inline;}
.banner .d2 li.nuw{background:url(images/img1_1.png) white no-repeat center;}
</style>
<div class="banner" id="banner" >
    <a href="#" class="d1" style="background:url(images/banner1.jpg) red center no-repeat;"></a> 
    <a href="#" class="d1" style="background:url(images/banner2.jpg) yellow center no-repeat;"></a>
    <a href="#" class="d1" style="background:url(images/banner3.jpg) #03A9F4 center no-repeat;"></a>
    <a href="#" class="d1" style="background:url(images/banner4.jpg) #795548 no-repeat;"></a>
    <a href="#" class="d1" style="background:url(images/banner5.jpg) #CDDC39 no-repeat;"></a>
    <div class="d2" id="banner_id">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<script type="text/javascript">banner()</script>
<div style="text-align:center;clear:both">
<p>适用浏览器:IE6+、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.图片自行配图</p>
</div>
</body>
</html>

 





jquery全屏banner自动轮播切换




About the author

柏小白 administrator