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语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
用vue写一个日历
Nov 02 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
服务器端解压缩zip的脚本
2006/12/22 PHP
详解PHP归并排序的实现
2016/10/18 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python标准库与第三方库详解
2014/07/22 Python
python实现的重启关机程序实例
2014/08/21 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python中元组的用法整理
2020/06/15 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
文秘专业自荐信
2013/10/14 职场文书
货代行业个人求职简历的自我评价
2013/10/22 职场文书
施工员岗位职责
2014/03/16 职场文书
锦旗标语大全
2014/06/23 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
齐云山导游词
2015/02/06 职场文书
给领导敬酒词
2015/08/12 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书