1.标签切换 / 书签切换 / 默认效果 2.焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图片无缝滚动-左 6. 图片无缝滚动-上 7. 文字滚动-左8. 文字滚动-上11. 导航12. 手风琴
效果显示2:http://www.superslide2.com/otherDemo.html
小实例:
<div id="indexbanner">
  <div class="fullSlide">
    <div class="bd">
      <ul>
        <li _src="url(/statics/lion/bannerimages/index5.jpg)" style="background:center 0;"><a target="_blank" href="http://www.lionbrien.com/html_news/brandactive/20140906_40.html" title="迎中秋庆国庆贝恩给您送好礼"></a></li>
        <li _src="url(/statics/lion/bannerimages/index4.jpg)" style="background:center 0;"><a target="_blank" href="http://www.lionbrien.com/html_news/brandnews/20140902_37.html"></a></li>
        <li _src="url(/statics/lion/bannerimages/3dflash.jpg)" style="background:center 0;"><a href="/statics/lion/swf/3d.swf" id="flash3d" title="提示:(拖动鼠标观看,点击图片中红色按钮进入下一页面)<br>第14届上海孕婴童展会上,小狮贝恩母婴家居生活馆采用镂空的设计创意,温馨趣致的森林主题陈列,打造童话世界般的服装家居盛典,成为展会上耀眼的明星。"></a></li>
        <li _src="url(/statics/lion/bannerimages/index1.jpg)" style="background:center 0;"><a target="_blank" href="http://www.lionbrien.com/html_news/brandnews/20140415_13.html"></a></li>
        <li _src="url(/statics/lion/bannerimages/index2.jpg)" style="background:center 0;"><a target="_blank" href="http://www.lionbrien.com/html_joinus/"></a></li>
      </ul>
    </div>
    <span class="prev png"></span> <span class="next png"></span> </div>
    <script type="text/javascript">   
    /* 首页顶部banner控制左右按钮显示 */
    jQuery(".fullSlide").hover(function(){ jQuery(this).find(".prev,.next").stop(true,true).show() },function(){ jQuery(this).find(".prev,.next").hide() });
    /* 调用SuperSlide */
    jQuery(".fullSlide").slide({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> 
  </div>
评论