任何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：是否启用在幻灯片之间滑动的功能。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5268