<style type="text/css">
#SlideBannerBox{height:350px; position:relative; background:#fafafa; overflow:hidden;}
#SlideBannerBox li{ background:url(images/loadingPD.gif) no-repeat center center;}
#SlideBannerBox a{display:block; height:350px;}
#SlideBannerBox .item{ position:absolute; left:50%; bottom:15px;}
#SlideBannerBox .item span{display:block; 50px;height:10px; margin:0 5px; float:left; cursor:pointer;background:#000;}
</style>
<!--banner-->
<div id="SlideBannerBox">
<ul>
<li data-img="images/banner/banner1.jpg"><a href="#1" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#2" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#3" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#4" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#5" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#1" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#2" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#3" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#4" target="_blank"></a></li>
<li data-img="images/banner/banner1.jpg"><a href="#5" target="_blank"></a></li>
</ul>
</div>
<!--banner end-->
<script type="text/javascript" async>
function SlideBanner(obj){
this.bannerBox=obj;
this.bannerList=$("ul li",obj);
this.setImgBg();
var _this_=this;
if(this.bannerList.size()>1){//当banner图数量大于1的时候才序列对应的按钮
this.t=null;
this.t2=null;
this.loop=0;
this.btnDivBox=$("<div class='item'></div>");
this.addButtons();
this.autoPlay();
this.bannerBox.hover(function(){
window.clearInterval(_this_.t2);
},function(){
_this_.autoPlay();
});
};
};
SlideBanner.prototype={
preLoadImg:function(url,callBack){//判断图片是否加载完成
var img=new Image();
if(!!window.ActiveXObject){
img.onreadystatechange=function(){
if(this.readyState=="complete"){
callBack();
};
};
}else{
img.onload=function(){
callBack();
};
};
img.src=url;
},
setImgBg:function(){//设置背景图片
var _this=this;
this.bannerList.each(function(i,o){
//当背景图片载入完成后才设置到背景里面
_this.preLoadImg($(o).attr("data-img"),function(){
$(o).css("backgroundImage","url("+$(o).attr("data-img")+")");
});
});
},
addButtons:function(){
var _this=this,w=19*this.bannerList.size();
this.btnDivBox.width(w).css("marginLeft",-w/2+"px");
this.bannerList.each(function(i,o){
_this.btnDivBox.append("<span></span>");
});
this.bannerBox.append(this.btnDivBox);
this.btnDivBox.children().eq(0).addClass("current").end().mouseover(function(e){
e.stopPropagation();
var $this=this;
_this.t=window.setTimeout(function(){
if(!$($this).hasClass("current")){
_this.changeStyle($this);
};
},200);
}).mouseout(function(){
window.clearTimeout(_this.t);
});
},
changeStyle:function(thisObj){
var i=$(thisObj).index();
this.bannerList.hide().eq(i).fadeIn();
this.btnDivBox.children().eq(i).addClass("current").siblings().removeClass("current");
this.loop=i;
},
autoPlay:function(){
var _this=this;
this.t2=window.setInterval(function(){
if(_this.loop==_this.bannerList.size()-1){
_this.loop=-1;
};
_this.loop++;
_this.btnDivBox.children().eq(_this.loop).mouseover();
},5000);
}
};
$(function(){
var s=new SlideBanner($("#SlideBannerBox"));
});
</script>