EasySlider 基于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演示

默认设置(只有左右翻)
默认设置(下面是数字页面)



相关阅读:
LiveMigration实战之九:安装高可用性虚拟机
CSS BUG问题解决的一些经验
Root用户以telnet方式登录Linux系统
让innerHTML的脚本也可以运行起来
网页的HTML结构进行重构:语义化标签的意义
asp.net 因为数据库正在使用的解决方法
css中IE判断语句 if !IE
用JavaScript检查大写键(Caps Lock)是否打开的脚本
MySQL中文参考手册3
虚拟主机上asp.net运行权限不足问题及解决
COM in PHP (winows only)
在asp.net中实现datagrid checkbox 全选的方法
HttpWebRequest和HttpWebResponse用法小结
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4