快捷導(dǎo)航

EasySlider 基于jQuery功能強(qiáng)大簡(jiǎn)單易用的滑動(dòng)門插件

更新時(shí)間：2010年06月11日 18:23:09 作者：

Easy Slider 是一個(gè)滑動(dòng)門插件，支持任何圖片或內(nèi)容，當(dāng)點(diǎn)擊時(shí)實(shí)現(xiàn)橫向或縱向滑動(dòng)。它擁有一系列豐富的參數(shù)設(shè)置，可通過CSS來進(jìn)行完全的控制。

Easy Slider 是一個(gè)滑動(dòng)門插件，支持任何圖片或內(nèi)容，當(dāng)點(diǎn)擊時(shí)實(shí)現(xiàn)橫向或縱向滑動(dòng)。它擁有一系列豐富的參數(shù)設(shè)置，可通過CSS來進(jìn)行完全的控制。所以，基本上你只需要鏈接這個(gè)插件文件后，設(shè)置好內(nèi)容，然后樣式化CSS就可以了。

EasySlider的功能
支持橫向或縱向滑動(dòng)
支持自動(dòng)滾動(dòng)
支持連續(xù)滑動(dòng)
“上一屏”和”下一屏按鈕”
“到第一屏”和”最后一屏”按鈕
隱藏的控制
可選的控制按鈕包圍標(biāo)記
同一頁(yè)面可支持多個(gè)滑動(dòng)門
可設(shè)置滑動(dòng)速度、是否自動(dòng)、停頓間隔等等

EasySlider的使用方法

1. 首先是html標(biāo)記

復(fù)制代碼代碼如下:

 
<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> 

注: 每個(gè)li里面的內(nèi)容就是一個(gè)滑動(dòng)層，下面的span用于滑動(dòng)導(dǎo)航。
2. 然后調(diào)用jquery庫(kù)和EasySlider插件

復(fù)制代碼代碼如下:

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

注: 放于</header>之前
3. 初始化插件代碼

復(fù)制代碼代碼如下:

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

注: 放于上面的代碼下面，其中的#sidebar對(duì)應(yīng)HTML標(biāo)記中div元素的CSS選擇器，指明腳本應(yīng)用于這個(gè)層，你也可以使用class名稱，那這里就寫成類似于
$(“.list”)。
.easyslider 擁有許多參數(shù)，具體查看作者的原文.
4. CSS樣式定義

復(fù)制代碼代碼如下:

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