FROM: http://paranp_w_picpath.com/easy-slider/

Easy Slider?是一個(gè)滑動(dòng)門插件，支持任何圖片或內(nèi)容，當(dāng)點(diǎn)擊時(shí)實(shí)現(xiàn)橫向或縱向滑動(dòng)。它擁有一系列豐富的參數(shù)設(shè)置，可通過(guò)CSS來(lái)進(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)記

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

<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對(duì)應(yīng)HTML標(biāo)記中div元素的CSS選擇器，指明腳本應(yīng)用于這個(gè)層，你也可以使用class名稱，那這里就寫成類似于
$(“.list”)。

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

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

注: 根據(jù)你自己的需要進(jìn)行樣式化。

這樣就OK了。

EasySlider的DEMO演示

• 默認(rèn)設(shè)置(沒(méi)有樣式化)

• 默認(rèn)設(shè)置(樣式化)

• 沒(méi)有樣式化/垂直滾動(dòng)/“Go to First” 和”Go to Last”按鈕可用

• 樣式化/自動(dòng)滾動(dòng)/連續(xù)滑動(dòng)
  

• 樣式化/多個(gè)滑動(dòng)門/圖像和內(nèi)容滑動(dòng)門/含各種不同的設(shè)置
  

EasySlider的原文鏈接

• jQuery plugin – Easy Image or Content Slider
  這是最先發(fā)布版本時(shí)的文章，包含詳細(xì)的使用說(shuō)明和，參數(shù)解釋和DEMO演示。

• Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content
  這是更新的1.5版，主要是更新功能的介紹

轉(zhuǎn)載于:https://blog.51cto.com/norman20000/1599739

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Easy Slider: 功能强大简单易用的jQuery滑动门插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。