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>
评论