移动轮播图我看到两款，

一款是无线天猫的m.tmall.com，实现了无缝轮播。

一款是蘑菇街的，没有实现无缝轮播。

我自己重写一个，类似蘑菇街

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>基于jQuery的移动轮播图（支持触屏）</title>

    <style type="text/css">

    .WSCSlideWrapper{

        width: 420px;

        height: 180px;

        position: relative;

        overflow: hidden;

    }

    .WSCSlide{

        width: 1680px;

        height: 100%;

        font-size: 0;

        position: absolute;

        -webkit-transform:translate3d(0,0,0);

    }

    .WSCSlideTransition{

        -webkit-transition: all 0.5s 0s ease-in-out;

    }

    .WSCSlide_img{

        width: 420px;

        height: 180px;

    }

    </style>

</head>

<body>

    <div class="WSCSlideWrapper">

        <div class="WSCSlide WSCSlideTransition">

            <img class="WSCSlide_img" src="1.jpg" />

            <img class="WSCSlide_img" src="2.jpg" />

            <img class="WSCSlide_img" src="3.jpg" />

        </div>

        <div class="WSCSlideStatus"></div>

    </div>

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

<script type="text/javascript">

// 基于jQuery的移动端轮播插件，用zepto会有with问题

// 返回值  轮播对象

// 参数：

// WSCSlideTransition    Transition的class名

// WSCSlideWrapper    轮播的jQuery对象

// WSCSlide     包裹轮播图片jQuery对象

// WSCSlide_img   轮播图片列表jQuery对象

// timerNum     循环时间

function WSCMobileSlide(arg_obj) {

    /*

    参数:

    el是jQuery选择器

    返回值:

    matrix.m41是x值 number

    matrix.m42是y值 number

    参考链接 http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery

    参考链接 https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/javascript/instp/WebKitCSSMatrix/m41

    */

    function getTransform(el) {

        var style = window.getComputedStyle($(el).get(0));

        var matrix = new WebKitCSSMatrix(style.webkitTransform);

        return matrix;

    }

    function slideAnimate(x, y) {

        if (Math.abs(x) >= y) {

            // $(".WSCSlide").removeClass("WSCSlideTransition");

            $(".WSCSlide").css("-webkit-transform", "translate3d(0,0,0)");

        } else {

            // $(".WSCSlide").addClass("WSCSlideTransition");

            $(".WSCSlide").css("-webkit-transform", "translate3d(" + x + "px,0,0)");

        }

    }

    function getSlideTimer(timeNum) {

        if(typeof(timeNum) == "undefined"){

            timeNum = 3000;

        }

        var slideTimer = setInterval(function() {

            var x = getTransform(".WSCSlide").m41;

            x = x - ImgWidth;

            slideAnimate(x, endPosition);

        }, timeNum);

        return slideTimer;

    }

    function touchDragMe($element) {

        var gundongX = 0;

        var gundongY = 0;

        var d = document;

        var g = 'getElementById';

        var moveEle = $element;

        var stx = sty = etx = ety = curX = curY = 0;

        moveEle.on("touchstart", function(event) { //touchstart

            $element.removeClass(transitionName);

            clearInterval(slideTimer);

            var event = event.originalEvent;

            gundongX = 0;

            gundongY = 0;

            // 元素当前位置

            etx = parseInt(getT3d(moveEle, "x"));

            ety = parseInt(getT3d(moveEle, "y"));

            // 手指位置

            stx = event.touches[0].pageX;

            sty = event.touches[0].pageY;

        });

        moveEle.on("touchmove", function(event) {

            var event = event.originalEvent;

            // 防止拖动页面

            event.preventDefault();

            // 手指位置 减去 元素当前位置 就是 要移动的距离

            gundongX = event.touches[0].pageX - stx;

            gundongY = event.touches[0].pageY - sty;

            // 目标位置 就是 要移动的距离 加上 元素当前位置

            curX = gundongX + etx;

            curY = gundongY + ety;

            // 自由移动

            // moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)';

            // 只能移动Y轴方向

            // var realMoveEle = moveEle[0];

            moveEle[0].style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + 0 + 'px,0px)';

        });

        moveEle.on("touchend", function(event) {

            // 手指接触屏幕的位置

            var oriX = etx;

            var oriY = ety;

            // 手指离开屏幕的位置

            etx = curX;

            ety = curY;

            var slidePosition = 0;

            for (var i = 0; i < ImgWidth_arr_length - 1; i++) {

                if (Math.abs(etx) > ImgWidth_arr[i]) {

                    if (oriX > etx) {

                        // 左滑

                        slidePosition = -ImgWidth_arr[i + 1];

                    } else {

                        // 右滑

                        slidePosition = -ImgWidth_arr[i];

                    }

                }

            }

            $element.addClass(transitionName);

            slideAnimate(slidePosition, endPosition);

            slideTimer = getSlideTimer(timerNum);

        });

        function getT3d(elem, ename) {

            var elem = elem[0];

            var str1 = elem.style.webkitTransform;

            if (str1 == "") return "0";

            str1 = str1.replace("translate3d(", "");

            str1 = str1.replace(")", "");

            var carr = str1.split(",");

            if (ename == "x") return carr[0];

            else if (ename == "y") return carr[1];

            else if (ename == "z") return carr[2];

            else return "";

        }

    }

    var transitionName = arg_obj["WSCSlideTransition"] || "WSCSlideTransition";

    var $WSCSlideWrapper = arg_obj["WSCSlideWrapper"] || $(".WSCSlideWrapper");

    var $WSCSlide = arg_obj["WSCSlide"] || $(".WSCSlide");

    var $WSCSlide_img = arg_obj["WSCSlide_img"] || $(".WSCSlide_img");

    var timerNum = arg_obj["timerNum"] || 3000;

    $WSCSlide_img.width($WSCSlideWrapper.width());

    $WSCSlide_img.height($WSCSlideWrapper.height());

    var ImgWidth_arr_length = $WSCSlide_img.length;

    var ImgWidth = $WSCSlide_img.width();

    $WSCSlide.width(ImgWidth * ImgWidth_arr_length);

    var WSCSlideWidth = $WSCSlide.width();

    // 轮播图终止位置

    var endPosition = WSCSlideWidth - ImgWidth;

    var ImgWidth_arr = [];

    for (var i = 0; i < ImgWidth_arr_length; i++) {

        ImgWidth_arr.push(i * ImgWidth);

    }

    // console.log(ImgWidth_arr);

    var slideTimer = getSlideTimer(timerNum);

    touchDragMe($WSCSlide, slideTimer);

    return slideTimer;

}

WSCMobileSlide({

    "WSCSlideTransition": "WSCSlideTransition",

    "WSCSlideWrapper": $(".WSCSlideWrapper"),

    "WSCSlide": $(".WSCSlide"),

    "WSCSlide_img": $(".WSCSlide_img"),

    "timerNum": 3000

});

</script>

</body>

</html>

基于jQuery的移动轮播图（支持触屏）的更多相关文章

  1. Bootstrap幻灯轮播如何支持触屏左右滑动手势？

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  2. 支持触屏的jQuery轮播图插件

    移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...

  3. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  4. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  5. javascript如何判断访问网页的设备及是否支持触屏功能

    var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac ...

  6. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  7. 基于skitter的轮播图炫酷效果，幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  8. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  9. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

随机推荐

  1. 【python cookbook】【数据结构与算法】18.将名称映射到序列的元素中

    问题:希望通过名称来访问元素,减少结构中对位置的依赖性 解决方案:使用命名元组collections.namedtuple().它是一个工厂方法,返回的是python中标准元组类型的子类,提供给它一个 ...

  2. CentOS6.5系统软件仓库及挂载NTFS

    第一步:下载rpmforge,下载对应的版本,就是对应CentOS版本,还有32位与64位也要对应上.rpmforge拥有4000多种CentOS的软件包,被CentOS社区认为是最安全也是最稳定的一 ...

  3. ARM、Intel、MIPS处理器啥区别？看完全懂了【转】

    转自:http://news.mydrivers.com/1/472/472317.htm 安卓支持三类处理器(CPU):ARM.Intel和MIPS.ARM无疑被使用得最为广泛.Intel因为普及于 ...

  4. va_list/va_start/va_arg/va_end深入分析【转】

    转自:http://www.cnblogs.com/justinzhang/archive/2011/09/29/2195969.html va_list/va_start/va_arg/va_end ...

  5. Dijkstra 算法、Kruskal 算法、Prim算法、floyd算法

    1.dijkstra算法 算最短路径的,算法解决的是有向图中单个源点到其他顶点的最短路径问题. 初始化n*n的数组. 2.kruskal算法 算最小生成树的,按权值加入 3.Prim算法 类似dijk ...

  6. 中颖4位MCU的减法汇编指令

    1, SUB M 执行动作: M - A -> A, 如果M-A的过程中没有产生借位,则CY= 1,如果产生了借位,则CY= 0. 其中,A为累加器. 2, SBI M, I 执行动作:M - ...

  7. java 面试每日一题4

    题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?  1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. publ ...

  8. c#之线程池

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  9. 转载-python学习笔记之输入输出功能读取和写入数据

    读取.写入和 Python 在 “探索 Python” 系列以前的文章中,学习了基本的 Python 数据类型和一些容器数据类型,例如tuple.string 和 list.其他文章讨论了 Pytho ...

  10. Codeforces Round #260 (Div. 2) A

    Description One day Dima and Alex had an argument about the price and quality of laptops. Dima think ...