参考网站: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 :