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


Posted in Javascript onJune 11, 2010

Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制。所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了。
EasySlider 基于jQuery功能强大简单易用的滑动门插件
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演示

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

Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
详解小程序循环require之坑
Mar 08 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 #Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 #Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 #Javascript
js鼠标左右键 键盘值小结
Jun 11 #Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 #Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 #Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 #Javascript
You might like
php使用Imagick生成图片的方法
2015/07/31 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python 测试实现方法
2008/12/24 Python
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Puppeteer使用示例详解
2019/06/20 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
大学生演讲稿
2014/04/25 职场文书
机动车登记业务委托书
2014/10/08 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python