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;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 {
100%;
margin: 0;
padding: 0;
position: relative;
height: 500px;
}
.bannerImage {
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;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