EasySlider 基于jQuery功能強大簡單易用的滑動門插件

2019-11-21 00:26:04

字體：大中小

來源：轉載

供稿：網友

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