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

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

php中文网

发布： 2016-05-16 18:25:07

原创

1256人浏览过

Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。所以，基本上你只需要链接这个插件文件后，设置好内容，然后样式化CSS就可以了。
EasySlider 基于jQuery功能强大简单易用的滑动门插件_jquery
EasySlider的功能
支持横向或纵向滑动
支持自动滚动
支持连续滑动
“上一屏”和”下一屏按钮”
“到第一屏”和”最后一屏”按钮
隐藏的控制
可选的控制按钮包围标记
同一页面可支持多个滑动门
可设置滑动速度、是否自动、停顿间隔等等

EasySlider的使用方法

1. 首先是html标记

好买卖商城

好买卖商城开源商城是基于Opencart网店系统,针对中文用户而改进的本地化分支,是真正的开源PHP中文网店系统，兼容Opencart的插件。该系统具有易于操作的可视化安装界面、完善的前台商品展示和户在线购物车功能、强大的后台管理和维护功能模块简单易用,灵活的插件机制，更易于扩展。另外，好买卖商城开源商城还集成集成了支付宝等支付和物流插件,更适合中文用户使用。好买卖商城2.0开源商城流程进行

查看详情

复制代码代码如下:

content here...

content here...

content here...

previous
Next

注: 每个li里面的内容就是一个滑动层，下面的span用于滑动导航。
2. 然后调用jquery库和EasySlider插件

复制代码代码如下:

注: 放于之前
3. 初始化插件代码

复制代码代码如下:

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