EasySlider 基于jQuery功能强大简单易用的滑动门插件

发布时间：2016-11-24 09:31:17 所属栏目：Unix 来源：站长网

导读：Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。所以，基本上你只需要链接这个插件文件后，设置好内容，然后样式化CSS就可以了。 EasySlider的功能支持横向或纵

Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。所以，基本上你只需要链接这个插件文件后，设置好内容，然后样式化CSS就可以了。

EasySlider的功能
支持横向或纵向滑动
支持自动滚动
支持连续滑动
“上一屏”和”下一屏按钮”
“到第一屏”和”最后一屏”按钮
隐藏的控制
可选的控制按钮包围标记
同一页面可支持多个滑动门
可设置滑动速度、是否自动、停顿间隔等等

EasySlider的使用方法

1. 首先是html标记
复制代码代码如下:
lt;div id="slider"gt;
lt;ulgt;
lt;ligt;content here...lt;/ligt;
lt;ligt;content here...lt;/ligt;
lt;ligt;content here...lt;/ligt;
...
lt;/ulgt;
lt;span id="prevId"gt;lt;a href="javascript:void(0);"gt;previouslt;/agt;lt;/spangt;
lt;span id="nextBtn"gt;lt;a href="javascript:void(0);"gt;Nextlt;/agt;lt;/spangt;
lt;/divgt;

注: 每个li里面的内容就是一个滑动层，下面的span用于滑动导航。
2. 然后调用jquery库和EasySlider插件
复制代码代码如下:
lt;script type="text/javascript" src="/js/jquery.js"gt;lt;/scriptgt;
lt;script type="text/javascript" src="/js/easySlider.js"gt;lt;/scriptgt;

注: 放于lt;/headergt;之前
3. 初始化插件代码
复制代码代码如下:
lt;script type="text/javascript"gt;
$(document).ready(function(){
$("#slider").easySlider({
prevText: 'previous Slide',
nextText: 'Next Slide',
orientation: 'vertical'
});
});
lt;/scriptgt;

注: 放于上面的代码下面，其中的#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演示

默认设置(只有左右翻)
默认设置(下面是数字页面)

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!