参考网站:http://www.gmarwaha.com/? 的一个JCarousel Lite 插件
?
先把js写出来给大家分析一下:
<script type="text/javascript">
$(function() {
??? $(".anyClass").jCarouselLite({? /*jCarouselLite 插件是这个效果的关键*/
??????? btnNext: ".scrillRight",? /*单击向下图片滚动*/
??????? btnPrev: ".scrollLeft", /*单击向上图片滚动*/
??????? auto: 800,???????????????? /*自动滚动*/
??????? speed: 1000???????????? /*速度*/
??? });
});
</script>
结构:
?
<div class="border">
?<span class="prev scrollLeft" ></span> /*向上按钮*/ ??????
? <div class="anyClass">
????? <ul>
?????? <li><a href="#"><img src="big_01.jpg"/></a></li>??? /*滚动的图片*/
????? <li><a href="#"><img src="big_02.jpg"/></a></li>
????? <li><a href="#"><img src="big_03.jpg"/></a></li>
????? </ul>
? </div>
?<span class="next scrillRight"></span> /*向下按钮*/ ??
</div>
?
需要看效果的,请看附件DEMO :