SuperSlide 案例

分类:jquery实践

 

1.标签切换 / 书签切换 / 默认效果 2.焦点图 / 幻灯片  3. 图片滚动-左 4. 图片滚动-上 5. 图片无缝滚动-左 6. 图片无缝滚动-上 7. 文字滚动-左8. 文字滚动-上11. 导航12. 手风琴 

 

效果显示:/demo/jquery/superslide/

 效果显示2http://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>

 

本文链接: SuperSlide 案例
版权所有:后巴士在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 后巴士 all rights reserved.