移动轮播图我看到两款，

一款是无线天猫的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. 模块已加载，但对dllregisterServer的调用失败

    在注册dll或者ocx的时候, 经常会遇到这么一个问题: 模块  已加载,但对dllregisterServer的调用失败,错误代码为0x8004***** 网上有网友回复说需要在管理员的模式下进行注 ...

  2. grads 用arcgis分析站点的网格

    第一步,用工具创建渔网(要素类) 第二步:将站点excel导入,生成点要素 站点excle,点击上面节点导出数据即可. 第三步,叠加在一起,找网格编号.

  3. org.hibernate.TransientObjectException

    使用JPA注解@ManyToMany做一个多对多的用例. 为了避免在删除主表数据时同时级联删除从表数据,JPA官方文档建议在主表的从表字段使用级联注解:CascadeType.PERSIST,Casc ...

  4. 收藏的Android非常好用的组件或者框架。

    博客分类: android android框架 先说两个网站: http://www.androidviews.net/ http://www.theultimateandroidlibrary.co ...

  5. -WEBKIT-USER-SELECT:NONE导致输入框无法输入

    原文:http://hicc.me/post/webkit-user-select-none-disabling-text-field.html 最近在webview中写页面的时候发现个别Androi ...

  6. yum mysql on centos 7

    参考:https://www.linode.com/docs/databases/mysql/how-to-install-mysql-on-centos-7 centos 7上没有办法使用yum i ...

  7. ThreadPoolExecutor的学习

    Java多线程之ThreadPoolExecutor 线程池的作用就是使用更少的线程, 来执行更多的任务, 以达到线程的充分利用. 从ThreadPoolExecutor类的构造方法学习: /** * ...

  8. Datagrid扩展方法InitEditGrid{支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  9. HTTP缓存机制

    缓存对于移动端是非常重要的存在. 减少请求次数,减小服务器压力. 本地数据读取速度更快,让页面不会空白几百毫秒. 在无网络的情况下提供数据. 缓存一般由服务器控制(通过某些方式可以本地控制缓存,比如向 ...

  10. 各操作系统配置java环境变量

    Windows 1. JAVA_HOME -->>  E:\java-tools\Java\JDK8_64\jdk1.8.0_77 2. path -->> %JAVA_HOM ...