Easy Slider:功能强大简单易用的jQuery滑动门插件
2011-09-21 16:11
1111 查看
Easy Slider: 功能强大简单易用的jQuery滑动门插件
Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制。所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了。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演示
默认设置(没有样式化)默认设置(样式化)
没有样式化/垂直滚动/“Go to First” 和”Go to Last”按钮可用
样式化/自动滚动/连续滑动
样式化/多个滑动门/图像和内容滑动门/含各种不同的设置
EasySlider的原文链接
jQuery plugin – Easy Image or Content Slider这是最先发布版本时的文章,包含详细的使用说明和,参数解释和DEMO演示。
Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content
这是更新的1.5版,主要是更新功能的介绍
相关文章推荐
- Easy Slider: 功能强大简单易用的jQuery滑动门插件
- Easy Slider: 功能强大简单易用的jQuery滑动门插件
- EasySlider 基于jQuery功能强大简单易用的滑动门插件
- EasySlider 基于jQuery功能强大简单易用的滑动门插件
- Motio:简单但功能强大的的 jQuery 精灵动画插件
- Motio:简单但功能强大的的 jQuery 精灵动画插件
- 简单功能强大的jQuery图片剪裁插件Image Cropper
- jQuery文字高亮插件,使用简单,功能强大,支持FF/IE等主流浏览器
- jQuery文字高亮插件,使用简单,功能强大,支持FF/IE等主流浏览器
- 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
- 功能强大的jquery.validate表单验证插件
- 《转载》Barcode.js功能强大的条码生成jQuery插件
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- 自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7
- MixItUp功能强大的jQuery画廊插件
- 简单测试实现 博客园的头像上传功能 使用插件jquery jcrop+fineupload
- 分享一些基于jquery功能强大的LightBox灯箱效果插件
- 日历插件超简单好用功能强大的插件(附有源码文件和使用说明)
- 功能非常强大的表单验证插件jQuery formValidator