1.引入JS庫,jquery.js腳本和插件腳本jcarousellite.js。
代碼如下:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>
2.需要被展現的HTML結構 div>ul>li>img ,結構比較清晰
代碼如下:
<div>
<ul>
<li><img src="1.jpg" alt="" width="100" height="100" ></li>
<li><img src="2.jpg" alt="" width="100" height="100" ></li>
<li><img src="3.jpg" alt="" width="100" height="100" ></li>
<li><img src="4.jpg" alt="" width="100" height="100" ></li>
</ul>
</div>
3.執行啟動腳本
代碼如下:
$(function() {
$(".default .jCarouselLite").jCarouselLite({
btnNext: ".default .next",
btnPrev: ".default .prev"
});
});
官方網站演示:http://demo.jb51.net/js/jcarousellite2/index.htm
打包演示下載:http://www.jb51.net/jiaoben/33787.html