zoukankan      html  css  js  c++  java
  • JavaScript touch control slider

    Download v0.95 (3KB minified and gzipped).
    Actively supports these browsers: IE6+, Firefox 3+, Safari 5 (mobile Safari 4), Chrome 15, Opera 10+. Need jQuery 1.6+.
    Source code on GitHub.
    Tweet
    How to use
    TouchSlider depends on jQuery. Include both in your header:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jquery.touchslider.min.js"></script>
    <script>
    jQuery(function($) {
        $(".touchslider").touchSlider({/*options*/});
    });
    </script>
    In your html do something like:
    <div class="touchslider">
        <div class="touchslider-viewport" style="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>
    JavaScript options:
    container: this,
    duration: 350, // the speed of the sliding animation in milliseconds
    delay: 3000, // initial auto-scrolling delay for each loop
    margin: 5, // borders size. The margin is set in pixels.
    mouseTouch: true,
    namespace: "touchslider",
    next: ".touchslider-next", // jQuery object for the elements to which a "scroll forwards" action should be bound.
    pagination: ".touchslider-nav-item",
    currentClass: "touchslider-nav-item-current", // class name for current pagination item.
    prev: ".touchslider-prev", // jQuery object for the elements to which a "scroll backwards" action should be bound.
    scroller: viewport.children(),
    autoplay: false, // whether to move from image to image automatically
    viewport: ".touchslider-viewport"
    Note: be sure not to include a "," after the last line or you'll get an error in Internet Explorer.
    To manually start and stop the slider you can use the following code:
    $(".touchslider").data("touchslider").stop(); // stop the slider
    $(".touchslider").data("touchslider").start(); // start the slider
  • 相关阅读:
    data* H5新特性
    网页系统暗色模式的 W3C 新规范:preferscolorscheme
    pc网页布局简单整理
    [导入] 精彩网站新世界
    单一职责原则SRP(SingleResponsibility Principle)
    WebEx 创始人朱敏做企业家的七个理论(非常实用)
    最近找了些在Win32环境下调用ASP.NET编写的Web Service的例子。
    从SQL Server中读写大数据列。
    开放-封闭原则OCP(OpenClose Principle)
    一个求连数的小测试程序
  • 原文地址:https://www.cnblogs.com/top5/p/2575753.html
Copyright © 2011-2022 走看看