demo.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 (+). Siblings ("div"). FadeOut (2000); }, Seturl:function () {$ ("#" + Config.bannerid + "div"). each (the function () {var url = $ (this). TR ("Data-url"); if ($.trim (url) = = "" | | url = = undefined) {return; } $ (this). Append ("<a href=" + URL + "' style= ' display:block;height:" + config.height + "px;width:100%; ' Tar get= ' _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
Web banner based on JQUERY