jQuery兼容手机端图片滑动插件:jquery.Touchslider.js

blogdaren 2015-02-12 1评论 2347人次


官方插件地址:http://touchslider.com/

mobilizetoday地址:http://www.mobilizetoday.com/freebies/touchslider

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

优点:

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

缺点:

  1. 依赖 jQuery,需要额外加载 Javascript 脚本资源
  2. 插件默认会将第二页的内容隐藏,如果想要平铺展示则需要修改 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 type="text/javascript">
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>
4、手动开始或停止:
$(".touchslider").data("touchslider").stop(); // stop the slider
$(".touchslider").data("touchslider").start(); // start the slider
5、 自定义样式:
样式需要结合具体的情况来定制,可以参照 Demo 中样式来修改。


版权声明:除非注明,本文由( blogdaren )原创,转载请保留文章出处。

本文链接:jQuery兼容手机端图片滑动插件:jquery.Touchslider.js

用户评论:

2015-02-12 14:52
不错,来看了博主好几篇关于VIM的文章,学习了~~

发表评论:

您的昵称:
电子邮件:
个人主页: