EasySlider

基本介紹

• 中文名：EasySlider
• 實質：滑動門外掛程式
• 特點：支持任何圖片或內容
• 功能：設定滑動速度、是否自動

外掛程式信息

Easy Slider 是一個滑動門外掛程式，支持任何圖片或內容，當點擊時實現橫向或縱向滑動。它擁有一系列豐富的參數設定，可通過CSS來進行完全的控制。所以，基本上你只需要連結這個外掛程式檔案後，設定好內容，然後樣式化CSS就可以了。

EasySlider的功能

支持橫向或縱向滑動

支持自動滾動

支持連續滑動

“上一屏”和”下一屏按鈕”

“到第一屏”和”最後一屏”按鈕

隱藏的控制

可選的控制按鈕包圍標記

同一頁面可支持多個滑動門

可設定滑動速度、是否自動、停頓間隔等等

使用方法

EasySlider的使用方法

1. 首先是html標記

<div id="slider"> <ul> <li>content here...</li> <li>content here...</li> <li>content here...</li> ... </ul> <span id="prevId"><a href="javascript:void(0);">previous</a></span> <span id="nextBtn"><a href="javascript:void(0);">Next</a></span> </div>

注: 每個li裡面的內容就是一個滑動層，下面的span用於滑動導航。

2. 然後調用jquery庫和EasySlider外掛程式

<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/easySlider.js"></script>

注: 放於</header>之前

3. 初始化外掛程式代碼

<script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText: 'previous Slide', nextText: 'Next Slide', orientation: 'vertical' }); }); </script>

注: 放於上面的代碼下面，其中的#sidebar對應HTML標記中div元素的CSS選擇器，指明腳本套用於這個層，你也可以使用class名稱，那這裡就寫成類似於

$(“.list”)。

.easyslider 擁有許多參數，具體查看作者的原文.

4. CSS樣式定義

#slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider, #slider li{ width:500px; height:200px; overflow:hidden; } span#prevBtn{} span#nextBtn{}

注: 根據你自己的需要進行樣式化。

這樣就OK了。