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 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
jquery禁用右键示例
Apr 28 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
JS实现小米轮播图
Sep 21 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
web方式ftp
2006/10/09 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
splice slice区别
2006/10/09 Javascript
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
javascript 常用方法总结
2009/06/03 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
求职信模板怎么做
2014/01/26 职场文书
法人委托书
2014/07/31 职场文书
建议书格式
2015/02/04 职场文书