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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
node实现爬虫的几种简易方式
Aug 22 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
使用Python实现博客上进行自动翻页
2017/08/23 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
印度网上药店:1mg
2017/10/13 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
岗位职责的含义
2013/11/17 职场文书
经典婚礼主持词
2014/03/13 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
靠谱的活动总结
2019/04/16 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL