Easy Slider: 功能强大简单易用的jQuery滑动门插件

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滑动门插件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。