jQuery – Lite content slider 實際執行畫面

在設計網站時，偶爾會需要用到一個展示的區域，不管是用來做廣告輪播的功能還是要做自己內容的展示，都會很需要用到一個區域來展示一些資訊。而 jQuery – Lite content slider 就是可以能來展示這些資訊的一個套件，精簡的內容展示套件具有高訂製性的能力更重要的是套件壓縮過後大小僅 1.8 KB 左右。

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
//jQuery Lite Content Slider 的主程式碼
<script src="/resources/js/jquery.lite-content-slider.min.js" type="text/javascript"></script>

第二步 設計要展示的HTML內容區域
<div class="contentWrap">
<div class="content"> Content 1 </div>
<div class="content"> Content 2 </div>
<div class="content"> Content 3 </div>
<div class="content"> Content 4 </div>
</div>
<!--分頁控制的內容-->
<ul class="contentWrap">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
</ul>

第三步 為內容展示櫃設計 CSS 樣式
.buttons, .control{
background: #000000;
padding: 3px 10px;
margin: 5px;
line-height: 0px;
color: #FFFFFF;
text-decoration: none;
}
.active{
background: #00CC66;
color: #00FF00;
}
.buttons:hover, .control:hover{
background: #0099FF;
}

第四步 加上 JavaScript 讓套件起作用
$(function(){
    $('.contentWrap').liteSlider({  //可修改參數
content : '.content', // 面板的選擇
width : 760, // 展示櫃寬度
height : 300, // 展示櫃高度
autoplay : true, // 是否自動撥放
delay : 3, // 播放的間隔時間
buttonsClass : 'buttons', // 按鈕的 Class 名稱
activeClass : 'active', // 作用中按鈕的 Class 名稱
controlBt : '.control', // 控制器的元素
playText : 'Play', // 播放的文字
pauseText : 'Stop' // 停止的文字
    });
});
作者網站：http://www.aakashweb.com/jquery-plugins/lite-content-slider/
檔案大小：4.12 KB
檔案下載：http://www.aakashweb.com/resources/downloads/jquery.lite-content-slider.zip
檔案備份：下載