模仿baidu钱包滚动广告功能
imges：
1.loading16x16.gif 
2.active-number.png 
3.inactive-number.png
-----------------------------
<html>
<title></title>
<head>
<style>
#slider {
background: url("images/loading16x16.gif") no-repeat scroll center center #edf7fb;
height: 420px;
width: 100%;
z-index: 10;
}
.slider-bg {
background-position: 50% 50%;
background-repeat: no-repeat;
display: none;
height: 420px;
overflow: hidden;
width: 100%;
}
.banner {
min-width: 980px;
width: 100%;
}
.pr {
position: relative;
}
#slider-number-box {
bottom: 10px;
left: 0;
margin-top: 5px;
position: absolute;
text-align: center;
width: 100%;
z-index: 100;
}
#slider li {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 11;
}
#slider-number-box a.active {
background-image: url("images/active-number.png");
}
#slider-number-box a {
background: url("images/inactive-number.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
font-size: 14px;
height: 8px;
overflow: hidden;
width: 30px;
}
a {
text-decoration: none;
}
#slider-number-box {
text-align: center;
}
</style>
</head>
<body>
<div class="banner pr">
<ul class="pr" id="slider">
<li>
<div style="background-image: url("https://co.baifubao.com/content/resource/baibaoquan-2500.jpg"); display: block;" class="slider-bg current">
<a target="_blank" href="http://qianbao.baidu.com/hd/bbq01?baiduqianbao"></a>
</div>
</li>
<li>
<div style="background-image: url("https://co.baifubao.com/picture/banner_worldcup.jpg"); display: none;" class="slider-bg">
<a target="_blank" href="http://qianbao.baidu.com/hd/worldcup?qianbao"></a>
</div>
</li>
<li>
<div style="background-image: url("https://co.baifubao.com/content/payhelp/r/baidu-banner.jpg"); display: none;" class="slider-bg">
<a target="_blank" href="http://www.baidu.com/home/xman/show/worldcupindex?frm=qianbao"></a>
</div>
</li>
<li>
<div style="background-image: url("https://co.baifubao.com/content/resource/wobaifu-2500.jpg"); display: none;" class="slider-bg">
<a target="_blank" href="http://qianbao.baidu.com/hd/wobaifu?baiduqianbao"></a>
</div>
</li>
<li>
<div style="background-image: url("https://co.baifubao.com/content/payhelp/r/zhuanzhang-banner.png"); display: none;" class="slider-bg">
<a target="_blank" href="http://life.baifubao.com/transfer/0/start/0"></a>
</div>
</li>
</ul>
<div id="slider-number-box">
<a href="###" class="active"></a> <a href="###" class=""></a> <a href="###" class=""></a> <a href="###" class=""></a> <a href="###" class=""></a>
</div>
</div>
<script src="https://www.baifubao.com/static/baifubao/js/lib/jquery-1.7.1.min.js" charset="utf-8" type="text/javascript"></script>
<script>
var MYAPP = MYAPP || {};
(function(C, B) {
var A = {
total_page: 0,
current_page: 0,
change_id: 0,
elements: null,
buttons: null,
showPageContent: function() {
var D = this.elements.find(".current");
D.parent().css("zIndex", "12");
D.fadeIn(350);
},
hidePageContent: function() {
var D = this.elements.find(".current");
D.parent().css("zIndex", "11");
D.fadeOut(350);
},
changePage: function() {
this.elements.find(".slider-bg").removeClass("current");
this.elements.children(":nth-child(" + this.current_page + ")").children().addClass("current");
this.buttons.children("a").removeClass("active");
this.buttons.children("a:nth-child(" + this.current_page + ")").addClass("active");
},
toNextPage: function() {
if (this.current_page === this.total_page) {
this.current_page = 1;
} else {
this.current_page++;
}
this.changePage();
},
toASpecificPage: function(D) {
this.hidePageContent();
this.current_page = D;
this.changePage();
this.showPageContent();
},
bindChangeButton: function() {
var D = this;
this.buttons.delegate("a", "click",
function() {
var E = C(this);
var F = E.index() + 1;
D.toASpecificPage(F);
clearInterval(D.change_id);
D.change_id = setInterval(function() {
D.setTimer();
},
8000);
});
},
setTimer: function() {
this.hidePageContent(this.current_page);
this.toNextPage();
this.showPageContent(this.current_page);
},
init: function(D, F) {
var E = this;
this.elements = D;
this.buttons = F;
this.total_page = D.find("li").length;
this.current_page = 1;
this.bindChangeButton();
this.showPageContent(this.current_page);
this.change_id = setInterval(function() {
E.setTimer();
},
8000);
}
};
C(document).ready(function() {
A.init(C("#slider"), C("#slider-number-box"));
});
})(jQuery, MYAPP);
</script>
</body>
</html>
