SuperSlide2实现图片滚动特效
这里贴一下自己演示的代码,期望对使用的朋友所有启发,我这里是结合了两个例子实现的
.focus-itemulli.item{ text-align:center; } .scroll-area.prev,.scroll-area.next{ position:absolute; bottom:590px; width:29px; height:64px; opacity:0.6; overflow:hidden; display:none; text-indent:-999px; border:mediumnone; background:url('/images/arrowLR.png')no-repeatscroll0%0%transparent; } .scroll-area.prev{ left:0px; background-position:-50px0px; } .scroll-area.next{ right:0px; } .scroll-area.bdOn.prev,.scroll-area.bdOn.next{ display:block; } .scroll-area.focus-hd{ /*width:832px;*/ /*left:60px;*/ /*position:absolute;*/ /*height:100px;*/ /*overflow:hidden;*/ left:63px; position:absolute; } .focus-hd.sNext,.focus-hd.sPrev{ float:left; display:block; width:14px; height:47px; text-indent:-9999px; background:url('/images/sprites1008.png')no-repeatscroll0px-3046pxtransparent; } .focus-hd.sNext{ background-position:0px-2698px; } .focus-hd.show_bottom_nav{ float:left; margin:0px6px; display:inline; width:832px; overflow:hidden; } .focus-hd.show_bottom_navulli{ margin-left:15px; }
html演示代码:
<divid=""class="scroll-area"> <divclass="focus-item"> <ul> <lidata-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg"class="item"data-text-id="#thumbTxt1"> <imgsrc="/attachments/news_gallery/20140528162328_454.jpg"alt="标题1"/> </li> <lidata-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg"class="item"data-text-id="#thumbTxt2"> <imgsrc="/attachments/news_gallery/20140528162328_733.jpg"alt="标题2"/> </li> </ul> <aclass="prev"href="javascript:void(0)"></a> <aclass="next"href="javascript:void(0)"></a> </div> <divclass="focus-hd"style=""> <aclass="sPrevprevStop"href="javascript:void(0)">←</a> <divclass="show_bottom_nav"> <ul> <lidata-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg"class="item"data-text-id="#thumbTxt1"style="float:left"> <imgstyle="width:150px;height:100px"src="/attachments/news_gallery/20140528162328_454.jpg"alt="标题1"/> </li> <lidata-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg"class="item"data-text-id="#thumbTxt2"style="float:left"> <imgstyle="width:150px;height:100px"src="/attachments/news_gallery/20140528162328_733.jpg"alt="标题2"/> </li> </ul> </div> <aclass="sNext"href="javascript:void(0)">→</a> </div> </div>
js脚本代码:
jQuery(".scroll-area").slide({titCell:'.focus-hdli',mainCell:'.focus-itemul',delayTime:0,trigger:0,autoPlay:true}); jQuery(".scroll-area.focus-item").hover(function(){jQuery(this).addClass("bdOn")},function(){jQuery(this).removeClass('bdOn')}); //小标签的导航 jQuery(".scroll-area.show_bottom_nav").slide({mainCell:"ul",delayTime:100,vis:5,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext"});