基本的轻量级响应式jQuery幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jquery.kiss-slider是一款简单的轻量级响应式jQuery幻灯片插件。该幻灯片插件提供了一个典型幻灯片所具备的所有功能，并且它使用简单，文件体积小，完全响应式设计，非常实用。

使用方法

使用该幻灯片插件需要在页面中引入jQuery和jquery.kiss-slider.min.js文件。

<script src="js/jquery.min.js"></script>                  
<script src="js/jquery.kiss-slider.min.js"></script>

HTML结构

该幻灯片使用无序列表作为HTML结构。

<ul id="kiss-slider">
    <li><img src="img/slide01.jpg" /></li>
    <li><img src="img/slide02.jpg" /></li>
    <li><img src="img/slide03.jpg" /></li>
    <li><img src="img/slide04.jpg" /></li>
    <li><img src="img/slide05.jpg" /></li>
    <li><img src="img/slide06.jpg" /></li>
</ul>

初始化插件

在页面DOM元素加载完毕之后，可以通过kissSlider()方法来初始化该幻灯片插件。

$(window).load(function() {
    $('#kiss-slider').kissSlider();
});

配置参数

该幻灯片插件的可用配置参数有：

slideSelector (string, default: null)：幻灯片的选择器。如果没有提供，kissSlider会使用调用元素的子元素作为选择器元素。
nextSelector (string, default: null)：“next”按钮的选择器。
prevSelector (string, default: null)：“prev”按钮的选择器。
paginationSelector (string, default: null)：分页按钮的选择器。
paginationBefore (string, default: '<li>')：每一个分页链接前显示的内容。只有paginationSelector参数不是<ul>元素是需要修改该参数。
paginationAfter (string, default: '</li>')：每一个分页链接后显示的内容。只有paginationSelector参数不是<ul>元素是需要修改该参数。
autoscrollDelay (int, default: 0)：自动播放的延迟时间，设置为0表示不自动播放。
startIndex (int, default: 0)：初始化时显示的图片下标，从0开始计算。
startingZ (int, default: 1)：幻灯片的z-index属性。
slideDuration (int, default: 400)：幻灯片动画的持续时间，单位毫秒。
easing (string, default: 'swing')：幻灯片动画的easing效果。
noAnim (boolean, default: false)：设置为false则禁止幻灯片动画。
beforeSlide (Function, default: null)：回调函数。在幻灯片每次开始动画时调用。参数：
- oldIndex：上一帧幻灯片的index。
- newIndex：下一帧幻灯片的index。
afterSlide (Function, default: null)：回调函数。在幻灯片每次结束动画时调用。参数：
- oldIndex：上一帧幻灯片的index。
- newIndex：下一帧幻灯片的index。
init (Function, default: null)：回调函数。在幻灯片初始化后被调用。
allowSwipe (Boolean, default: true)：在移动设备中为幻灯片添加移动触摸功能。

事件

可以通过下面的方式来调用事件。

$('#kiss-slider').kissSlider('moveTo', {index:2});

next：跳转到下一帧slide，无参数。
previous：跳转到前一帧slide，无参数。
moveTo：跳转到指定的slde，参数：
- index (int)：幻灯片slide的index，从0开始计算。
- dir (int, default:1)：1表示使幻灯片从有向左移动，-1表示使幻灯片从左向右移动。

jquery.kiss-slider幻灯片插件的github地址为：https://github.com/VivienLN/jquery.kiss-slider