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

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

EasySlider的功能

• 支持橫向或縱向滑動

• 支持自動滾動

• 支持連續(xù)滑動

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

• “到第一屏”和”最后一屏”按鈕

• 隱藏的控制

• 可選的控制按鈕包圍標(biāo)記

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

• 可設(shè)置滑動速度、是否自動、停頓間隔等等

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>

注: 每個li里面的內(nèi)容就是一個滑動層，下面的span用于滑動導(dǎo)航。

2. 然后調(diào)用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對應(yīng)HTML標(biāo)記中div元素的CSS選擇器，指明腳本應(yīng)用于這個層，你也可以使用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è)置(沒有樣式化)

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

• 沒有樣式化/垂直滾動/“Go to First” 和”Go to Last”按鈕可用

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

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

EasySlider的原文鏈接

• jQuery plugin – Easy Image or Content Slider
  這是最先發(fā)布版本時的文章，包含詳細(xì)的使用說明和，參數(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ù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

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

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