banner图幻灯片通屏显示效果

来源：互联网发布：mac文件储存在哪里编辑：程序博客网时间：2024/06/06 01:30

  <!--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是可以随时改动的

0 0