jQuery 插件 Touchslider

幻灯片、走马灯等一直是网页中比较常用的交互效果，在移动平台上也不例外，唯一的区别是操作方式不同，这里介绍一款同时适用于触摸、鼠标操作的幻灯片交互脚本 —— Touchslider

官网地址：http://touchslider.com/

优点：

兼容性好，适用于主流的桌面及移动(基于Weibkit)浏览器，且同时兼容鼠标和触摸操作
性能优秀，在 Android 和 iOS 等移动平台上的交互表现非常流畅
可塑性高，通过插件本身的设置再配合 CSS 可以打造成幻灯片、走马灯等多种交互效果

不足：

依赖 jQuery，需要额外加载 Javascript 脚本资源
插件默认会将第二页的内容隐藏，如果想要平铺展示则需要修改 Javascript 脚本

Demo：

插件的 官网 有 Demo 展示。

如何使用：

1. 加载 Javascript 脚本：

<script src="jquery.min.js"></script>
<script src="jquery.touchslider.min.js"></script>

2. 插入 HTML 代码：

<div class="touchslider">
    <div class="touchslider-viewport" style="width:500px;overflow:hidden">
        <div>
            <div class="touchslider-item"><!-- 这里是显示内容 --></div>
            <div class="touchslider-item"></div>
            ...
        </div>
    </div>

    <div>
        <span class="touchslider-prev">←</span>
        <span class="touchslider-nav-item touchslider-nav-item-current">1</span>
        <span class="touchslider-nav-item">2</span>
        ...
        <span class="touchslider-next">→</span>
    </div>
</div>

3. 配置、调用 touchslider

<script>
jQuery(function($) {
    $(".touchslider").touchSlider({
        container: this,
        duration: 350, // 动画速度
        delay: 3000, // 动画时间间隔
        margin: 5,
        mouseTouch: true,
        namespace: "touchslider",
        next: ".touchslider-next", // next 样式指定
        pagination: ".touchslider-nav-item",
        currentClass: "touchslider-nav-item-current", // current 样式指定
        prev: ".touchslider-prev", // prev 样式指定
        scroller: viewport.children(),
        autoplay: false, // 自动播放
        viewport: ".touchslider-viewport"
    });
});
</script>

手动开始或停止：

$(".touchslider").data("touchslider").stop(); // stop the slider
$(".touchslider").data("touchslider").start(); // start the slider

4. 自定义样式：

样式需要结合具体的情况来定制，可以参照 Demo 中样式来修改。