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

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

注: 根據你自己的需要進行樣式化。

這樣就OK了。

EasySlider的DEMO演示

• 默認設置(沒有樣式化)

• 默認設置(樣式化)

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

• 樣式化/自動滾動/連續滑動
  

• 樣式化/多個滑動門/圖像和內容滑動門/含各種不同的設置
  

EasySlider的原文鏈接

• jQuery plugin – Easy Image or Content Slider
  這是最先發布版本時的文章，包含詳細的使用說明和，參數解釋和DEMO演示。

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

轉載于:https://blog.51cto.com/norman20000/1599739

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。