任何Slider都是一个易于使用且支持触摸的jQuery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等。
特征:
- 重量轻,易于使用
- 支持键盘导航
- 使用淡入淡出或幻灯片过渡以及自定义缓动
- 支持自动播放
- 有很多选项可以自定义您自己的滑块
基本用法:
1.标记html结构
<div class="slider-wrapper"><font></font> <div class="slider" id="slider"> <font></font> <span> Content 1 </span><font></font> <section> Content2 </section><font></font> <div> Content 3</div><font></font> </div><font></font> </div>
2.在页面上包含jQuery库和jQuery AnySlider
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <font></font> <script src="jquery.anyslider.js"></script>
3.包含缓动插件以缓解效果
<script src="jquery.easing.1.3.js"></script>
4.包含jQuery AnySlider CSS来设置滑块的样式
<link rel="stylesheet" href="jquery-anyslider.css">
5.使用默认选项调用插件
$(document).ready(function () {<font></font> $('#slider').AnySlider();<font></font> });
6.所有默认选项。
afterChange: function () {}
:每次幻灯片更改后调用的函数。afterSetup: function () {}
:设置滑块后调用的函数。animation: 'slide'
:滑动或褪色beforeChange: function () {}
:每次幻灯片更改前调用的函数。easing: 'swing'
:缓解选项。样式名称在jquery.easing.1.3.js里interval: 5000
:每张幻灯片上暂停的毫秒数。将此选项设置为0将禁用自动播放。keyboard: true
:允许使用向左和向右箭头键进行键盘导航。nextLabel: 'Next slide'
:标签为下一个按钮。pauseOnHover: true
:在悬停时暂停自动播放prevLabel: 'Previous slide'
:prev键的标签。reverse: false
:启用自动播放时是否从右向左滑动而不是从左向右滑动。showBullets: true
:是否显示导航子弹。将此设置为false将阻止子弹被绘制。showControls: true
:显示/隐藏控件。将此设置为false将阻止控件的绘制。speed: 400
:动画时间(以毫秒为单位)。将此选项设置为0将禁用动画。startSlide: 1
:起始幻灯片的编号。touch: true
:是否启用在幻灯片之间滑动的功能。