支持移动触摸屏的响应式jQuery幻灯片插件

Unslider是一款简单实用的支持移动触摸设备的响应式jQuery幻灯片插件。该幻灯片插件支持所有的现代浏览器，支持键盘导航，支持移动触摸，并且幻灯片图片是响应式的。它的特点有：

• 跨浏览器。该幻灯片插件已经在所有的现代浏览上做了测试，并在旧版本的浏览器上会自动完美的回退。
• 支持键盘控制。你可以添加键盘 控制功能，使用键盘的左右方向键来控制幻灯片。
• 自动设置幻灯片的高度。幻灯片的高度会根据屏幕的大小自动调整。
• 响应式设计。
• 支持touch/swipe等移动触摸事件。

使用方法

首先要引入jQuery和unslider.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/unslider.js"></script>                
              

HTML结构

该幻灯片插件的HTML结构使用一个<div>包裹一个无序列表即可。无序列表中的每一个<li>元素是一张幻灯片图片。

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>               
              

CSS样式

你可以为这个幻灯片插件自定义各种CSS样式，但是有一些必须的CSS样式是你一定要添加的，代码如下：

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }                
              

.banner是你的包裹容器的class名称，可根据实际情况进行更换。

调用插件

在页面加载完毕之后，就可以使用下面的代码来初始化该幻灯片插件。

$(function() {
    $('.banner').unslider();
});                
              

支持移动触摸设备

如果你需要添加mobile/touch/swipe等移动触摸的支持，只需要在页面中引入jQuery.event.swipe插件即可。

添加前后导航链接

如果你想为这个幻灯片插件添加前后箭头导航按钮，可以像下面这样做：

<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>                
              

<!-- And the JavaScript -->
<script>
    var unslider = $('.banner').unslider();

    $('.unslider-arrow').click(function() {
        var fn = this.className.split(' ')[1];

        //  Either do unslider.data('unslider').next() or .prev() depending on the className
        unslider.data('unslider')[fn]();
    });
</script>                
              

箭头按钮的样式可以通过CSS来自定义。

配置参数

下面是该幻灯片插件的默认参数。

$('.banner').unslider({
  speed: 500,               //  The speed to animate each slide (in milliseconds)
  delay: 3000,              //  The delay between slide animations (in milliseconds), false for no autoplay
  complete: function() {},  //  A function that gets called after every slide animation
  keys: true,               //  Enable keyboard (left, right) arrow shortcuts
  dots: true,               //  Display dot navigation
  fluid: false              //  Support responsive design. May break non-responsive designs
});                
              

方法

该幻灯片插件有一个非常有用的data方法，通过它你可以访问和覆盖任何可用的方法。

var slidey = $('.banner').unslider(),
    data = slidey.data('unslider');

//  Start Unslider
data.play();

//  Pause Unslider
data.stop();

//  Move to a slide index, with optional callback
data.to(2, function() {});
//  data.to(0);

//  Manually enable keyboard shortcuts
data.keys();

//  Move to the next slide (or the first slide if there isn't one)
data.next();

//  Move to the previous slide (or the last slide if there isn't one)
data.prev();

//  Append the navigation dots manually
data.dots();