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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
理解JavaScript中的Proxy 与 Reflection API
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
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
JQuery live函数
2010/12/24 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Numpy中的mask的使用
2018/07/21 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python分类测试代码实例汇总
2020/07/23 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
怎样写好创业计划书的内容
2014/02/06 职场文书
初中学校军训方案
2014/05/09 职场文书
经费申请报告
2015/05/15 职场文书
食品安全主题班会
2015/08/13 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers