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="http://www.jb51.netjs/jquery.js"></script>

<script type="text/javascript" src="http://www.jb51.netjs/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演示

默认设置(只有左右翻)

默认设置(下面是数字页面)