官方網站：
http://www.gmarwaha.com/jquery/jcarousellite/
插件描述：
JCarouselLite是一款jquery插件，可以控制文檔元素滾動，豐富的參數設置可以控制滾動的更多細節，是一款不可多得的滾動插件。
說明：
12320網站首頁推薦專家使用了走馬燈的方式，以前選用的JS過於雜亂，不好調控，影響效率。所以選用JCarouselLite替代。
建議：
還有一款同類型的插件JCarousel，也可以使用，功能更加強大。
插件使用：
一、在ThinksKing的Plugins里面找到已解壓好的JCarouselLite，將jcarousellite_1.0.1.min添加到項目中。
二、為頁面添加jcarousellite：
1.1 添加Jquery和jcarousellite的引用。
<script src="http://www.cnblogs.com/Scripts/Plugin/Jcarousellite/jcarousellite_1.0.1.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
1.2 Html代碼編寫.
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>
1.3 方法調用.
1.4 API參數列表
btnPrev string 上一個按鈕的class名, 比如 btnPrev: ".prev"
btnNext string 下一個按鈕的class名, 比如 btnPrev: ".prev"
btnGo $(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
array 自定義滾動位置,類似幻燈片效果置,有選項卡,按照數組順序,依次為按鈕1按鈕2按鈕N,如以下,class名為1的按鈕是第一個按鈕：[".1", ".2"]
mouseWheel bool 鼠標滑是否可以輪控制上下滾動,可選：false,true,默認false
auto int 指定多少秒內容定期自動滾動。默認為空(null),是不滾動,如果設定的,單位為毫秒,如1秒為1000
speed int 滑動的速度,可以嘗試800 1000 1500,設置成0將刪除效果
easing string 緩沖效果名稱,如：easing: "bounceout",需要jquery中的easing pluin（緩沖插件實現）,只適用於jq1.2
vertical bool 是否垂直滾動,可選：false,true,默認false
circular bool 是否循環滾動,默認為true,如果為false,滾動到最后一個將停止滾動
visible int 可見數量,可以為小數，如2.5為2.5個li
start int 開始的地方,默認是0
scroll int 每次滾動的li數量
beforeStart func 滾動開始時回調的函數,可以傳入對象參數 beforeStart: function(a) { alert("開始的對象是:" + a)}
afterEnd func 滾動結束時回調的函數,使用方法同上
2011.12.10 實現Widget
1.添加easing引用：
<script src="Scripts/Plugin/JCarousel/jquery.easing.1.1.js"
type="text/javascript"></script>
調用代碼：
<script type="text/javascript">
$(function () {
$(".widget .anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
vertical: true,
speed: 800,
easing: "backout"
});
$(".widget img").click(function () {
$(".widget .mid img").attr("src", $(this).attr("src"));
})
});
</script>
頁面代碼：
<div class="widget">
<button class="prev">↓</button>
<div>
<div class="mid" style="float:left">
<img src="Images/2.jpg" alt="" height="100" width="100"/>
</div>
<div class="anyClass" >
<ul>
<li><img src="Images/2.jpg" alt="" width="100" height="100" /></li>
<li><img src="Images/3.jpg" alt="" width="100" height="100" /></li>
<li><img src="Images/4.jpg" alt="" width="100" height="100" /></li>
<li><img src="Images/3.jpg" alt="" width="100" height="100" /></li>
</ul>
</div>
</div>
<button class="next">↑</button>
</div>
三、官方文檔
Docuent:ThinksKing/Plugins/JCarouselLite/ jCarousel Lite – Document
API調用說明: ThinksKing/Plugins/JCarouselLite/JCarouselLite API