html+css+js 实现简单的banner轮播效果

文章内容

分享一款简单的html+css+js 实现简单的banner轮播效果

<link href="css/banner.css" rel="stylesheet" type="text/css" />
<script src="jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        function lunbo() {
            var bn_id = 0;
            var bn_inums = 1;
            var speed33 = 3000;
            var qhjg = 1;
            var MyMar33;
            $("#banner .img").hide();
            $("#banner .img").eq(0).fadeIn("slow");
            if ($("#banner .img").length > 1) {
                $("#banner_num li").eq(0).addClass("num");
                function Marquee33() {
                    bn_inums = bn_id + 1;
                    if (bn_inums > $("#banner .img").length - 1) {
                        bn_inums = 0;
                    }
                    $("#banner .img").eq(bn_id).css("z-index", "2");
                    $("#banner .img").eq(bn_inums).css("z-index", "1");
                    $("#banner .img").eq(bn_inums).show();
                    $("#banner .img").eq(bn_id).fadeOut("slow");
                    $("#banner_num li").removeClass("num");
                    $("#banner_num li").eq(bn_inums).addClass("num");
                    bn_id = bn_inums;
                };

                MyMar33 = setInterval(Marquee33, speed33);

                $("#banner_num li").click(function () {
                    var bn_id3 = $("#banner_num li").index(this);
                    if (bn_id3 != bn_id && qhjg == 1) {
                        qhjg = 0;
                        $("#banner .img").eq(bn_id).css("z-index", "2");
                        $("#banner .img").eq(bn_id3).css("z-index", "1");
                        $("#banner .img").eq(bn_id3).show();
                        $("#banner .img").eq(bn_id).fadeOut("slow", function () { qhjg = 1; });
                        $("#banner_num li").removeClass("num");
                        $("#banner_num li").eq(bn_id3).addClass("num");
                        bn_id = bn_id3;
                    }
                })
                $("#banner_num").hover(
			function () {
			    clearInterval(MyMar33);
			},
			function () {
			    MyMar33 = setInterval(Marquee33, speed33);
			}
		)
            }
            else {
                $("#banner_num").hide();
            }
        }
    </script>
<div class="banner" id="banner">
        <a href="" class="img" style="background: url(images/1.png) top no-repeat;"></a>
        <a href="" class="img" style="background: url(images/2.png) top no-repeat;"></a>
        <a href="" class="img" style="background: url(images/3.png) top no-repeat;"></a>
        <div class="nums" id="banner_num">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
<script type="text/javascript">lunbo()</script>

banner.css代码

*{ padding: 0; margin: 0px;}  
ul,li{ list-style-type: none;  } 
img{ border: none; } 
a{ text-decoration: none; } 
/*banner*/ 
.banner{height:472px;overflow:hidden; position:relative;width:100%; margin:0 auto; z-index:1;} 
.banner .img{width:100%;height:472px;display:block;position:absolute;left:0px;top:0px;} 
.banner .nums{width:100%;height:42px;clear:both;position:absolute;left:0px;bottom:0px; z-index:100;} 
.banner .nums ul{float:left;position:absolute;left:50%;margin:0 0 0 -36px;display:inline; } 
.banner .nums li{width:18px;height:18px;overflow:hidden;cursor:pointer;background:url(../images/img1_2.png) no-repeat center;float:left;margin:0 3px;display:inline;} 
.banner .nums li.num{background:url(../images/img1_1.png) no-repeat center;}