banner图幻灯片通屏显示效果

<!--banner开始-->
<style type="text/css">

/* 本例子css */
.fullSlide{ width:100%;  position:relative;  height:400px; background:#F7F6F6;  }
.fullSlide .bd{ margin:0 auto; position:relative; z-index:0; overflow:hidden;  }
.fullSlide .bd ul{ width:100% !important;  }
.fullSlide .bd li{ width:100% !important;  height:400px; overflow:hidden; text-align:center;  }
.fullSlide .bd li a{ display:block; height:400px; }

.fullSlide .hd{ width:100%;  position:absolute; z-index:1; bottom:0; left:0; height:30px; line-height:30px; }
.fullSlide .hd ul{ text-align:center; }
.fullSlide .hd ul li{ cursor:pointer; display:inline-block; *display:inline; zoom:1; width:42px; height:11px; margin:1px; overflow:hidden; background:#000;
filter:alpha(opacity=50);opacity:0.5;  line-height:999px;
}
.fullSlide .hd ul .on{ background:#f3af2d;  }

</style>

<div class="fullSlide">

<div class="bd">
<ul>

{aspcms:slidelist id=1}
<li _src="url([slidelist:pic])" style="background:#F7F6F6 center 0 no-repeat;"><a target="_blank" href="[slidelist:link]"></a></li>
{/aspcms:slidelist}

</ul>
</div>

<div class="hd"><ul></ul></div>
</div>
<script type="text/javascript" src="{aspcms:sitepath}/Templates/{aspcms:defaulttemplate}/images/jquery1.42.min.js"></script>
<script type="text/javascript" src="{aspcms:sitepath}/Templates/{aspcms:defaulttemplate}/images/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript">

/* 控制左右按钮显示 */
jQuery(".fullSlide").hover(function(){ jQuery(this).find(".prev,.next").stop(true,true).fadeTo("show",0.5) },function(){ jQuery(this).find(".prev,.next").fadeOut() });

/* 调用SuperSlide */
jQuery(".fullSlide").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold",  autoPlay:true, autoPage:true, trigger:"click",
startFun:function(i){
var curLi = jQuery(".fullSlide .bd li").eq(i); /* 当前大图的li */
if( !!curLi.attr("_src") ){
curLi.css("background-image",curLi.attr("_src")).removeAttr("_src") /* 将_src地址赋予li背景，然后删除_src */
}
}
});
</script>

<!--banner结束-->