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"});