jQuery插件Touchslider的用法

admin 发布时间:2015-11-20 分类:Web 阅读:1765次 添加评论

Touchslider主要用于网页幻灯片,手机端滑动等方面。功能强大,支持触摸屏触摸滑动,普通桌面网站鼠标点击滑动;兼容性好,适用于主流的桌面及移动(基于Weibkit)浏览器;流畅性,Android 和 iOS 等移动平台上的交互表现非常流畅,无任何卡顿现象。通过Touchslider交互脚本+CSS3可以写出一流的炫酷的幻灯片、滑动模块等多种交互效果。

根据 touchslider官网 给出的Demo 代码如下:

第一步:引入jQuery及插件脚本。

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

第二步:编写html及css代码(官网demo)。

<div class="touchslider">
    <div class="touchslider-viewport" style="width:500px;overflow:hidden"><div>
        <div class="touchslider-item"><!-- your html content --></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>

第三步:编写配置调用Touchslider的脚本代码。

<script>
    jQuery(function($) {    $(".touchslider").touchSlider({/*options*/});});
</script>

调用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


关键字词: jQueryTouchslider滑动

暂无留言

发表评论:

◎欢迎您的参与讨论。