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

banner特效用到了两个JS文件

jquery1.42.min.js

jquery.SuperSlide.2.1.1.js

这两个文件我已存到我百度网盘

幻灯片高度为400是可以随时改动的