基于 JQUERY 网页 banner

 

demo.html 

<html>
    <head>
        <title>demo</title>
        <link href="css/PaPaBanner.css" rel="stylesheet" />
        <script src="jquery-1.8.2.js"></script>

    </head>


    <body>
        
        <div id="banner">
            
            <div class="bannerImage" style="background-image: url(images/11.jpg);" data-url="http://www.baidu.com"></div>
            
            <div class="bannerImage" style=" background-image: url(images/12.jpg);" data-url=""></div>
            
            <div class="bannerImage" style=" background-image: url(images/13.jpg);" data-url="http://www.baidu.com"></div>

            <div class="bannerImage" style=" background-image: url(images/14.jpg);"></div>

        </div>
        <script src="PaPaBanner.js"></script>
    </body>
</html>

　

PaPaBanner.js 

$(function () {

    banner.init();

});

var config = {
    bannerId: "banner",
    height: 400,
    autoPlayInterval:3000
};


var banner = {
    index: 0,
    count: 0,

    init: function () {

        var obj = this;

        this.count = $("#" + config.bannerId + " .bannerImage").size();

        $("#" + config.bannerId).height(config.height);
        $("#" + config.bannerId + " .bannerImage").height(config.height);

        this.setUrl();
        
        this.setNavigator();
        
        this.setNavigatorHover();
        
        this.setIndex();

        this.timer = setInterval(function () { obj.autoPlay(); }, config.autoPlayInterval);
    },

    autoPlay: function () {

        this.index++;

        if (this.index >= this.count) {

            this.index = 0;
        }
        this.setIndex();
    },
    
    setIndex: function() {

        $("#" + config.bannerId + " .btn li").eq(this.index).addClass("lihover").siblings("li").removeClass("lihover");
        $("#" + config.bannerId + " .bannerImage").eq(this.index).fadeIn(2000).siblings("div").fadeOut(2000);
    },
    
    setUrl: function() {

        $("#" + config.bannerId + " div").each(function () {

            var url = $(this).attr("data-url");

            if ($.trim(url) == "" || url == undefined) {

                return;
            }
            $(this).append("<a href='" + url + "' style='display:block;height:" + config.height + "px;width:100%;' target='_blank' ></a>");

        });
    },
    setNavigator: function() {

        $("#" + config.bannerId).append("<ul class='btn'></ul>");

        for (var i = 0; i < this.count; i++) {

            $("#" + config.bannerId + " .btn").append("<li data-pos='" + i + "' ></li>");
        }
    },
    setNavigatorHover: function () {
        
        var obj = this;

        $("#" + config.bannerId + " .btn li").hover(function () {

            clearInterval(obj.timer);
            obj.index = $(this).attr("data-pos");
            obj.setIndex();

        }, function () {

            obj.timer = setInterval(function () { obj.autoPlay(); }, config.autoPlayInterval);
        });

    }
};

 

　　PaPaBanner.css

 

#banner {

    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    height: 500px;
}

.bannerImage {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
}

#banner .btn{ position: absolute;left: 70%;bottom:10px; display:inline-block;margin: 0px 0px;padding:2px 10px; background-color:#ccc;border-radius:11px;}

.btn li{float:left;height:16px;width:16px;list-style: none;text-align: center;margin: 0px;padding: 0px;margin-left: 5px;background: url(../images/1.png) no-repeat ; }

.btn .lihover{ background: url(../images/2.png) no-repeat ; }

 

　　

 

  

ok,     https://github.com/jinshuai/PaPaBanner

 

posted @ 2016-05-25 10:55  kingNull  阅读(218)  评论(0)  编辑  收藏  举报