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