模仿支付宝banner平铺浏览器设计效果（自由创建按钮序列）

	<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>