|
|
EasySlider的功能
支持橫向或縱向滑動
支持自動滾動
支持連續(xù)滑動
“上一屏”和”下一屏按鈕”
“到第一屏”和”最后一屏”按鈕
隱藏的控制
可選的控制按鈕包圍標(biāo)記
同一頁面可支持多個滑動門
可設(shè)置滑動速度、是否自動、停頓間隔等等
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>
注: 每個li里面的內(nèi)容就是一個滑動層，下面的span用于滑動導(dǎo)航。
2. 然后調(diào)用jquery庫和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對應(yīng)HTML標(biāo)記中div元素的CSS選擇器，指明腳本應(yīng)用于這個層，你也可以使用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{}
注: 根據(jù)你自己的需要進(jìn)行樣式化。
這樣就OK了。
EasySlider的DEMO演示
默認(rèn)設(shè)置(只有左右翻)
默認(rèn)設(shè)置(下面是數(shù)字頁面)
JavaScript技術(shù)：EasySlider 基于jQuery功能強(qiáng)大簡單易用的滑動門插件，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
