移动轮播图我看到两款，

一款是无线天猫的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. ThinkPHP 3.2.3的 R 方法

    R方法是可以调用其他的Controller中的方法, 例如 我想在Mit/DebugController.class.php中调用Foo/DoController.class.php中的share方法 ...

  2. git 使用详解（5）-- get log 查看提交历史【转】

    转自:http://blog.csdn.net/wh_19910525/article/details/7468549 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 限制 ...

  3. 【jqGrid for ASP.NET MVC Documentation】.学习笔记.1.介绍

    1 介绍 jqGrid for ASP.NET MVC 是一个服务端组件. 专为MVC    分隔 model ,view , controller 的原则,完全观察者模式 非常快的速度    仅仅很 ...

  4. MVP MVC MVVM 傻傻分不清

    最近MVC (Model-View-Controller) 和MVVM (Model-View-ViewModel) 在微软圈成为显学,ASP.NET MVC 和WPF 的Prism (MVVM Fr ...

  5. 使用PHP flush 函数的时候我们需要注意些什么呢？

    WebServer(可以认为特指apache)的缓冲区.在apache module的sapi下, flush会通过调用sapi_module的flush成员函数指针,间接的调用apache的api: ...

  6. 嵌入式jetty的HTTP实现

    2    嵌入式jetty的HTTP实现 布拉君君 2.1 简单HTTP实现 2.1.1 HTTP SERVER端实现 2.1.1.1 HTTP SERVER端实现概述 在代码中嵌入一个Jetty s ...

  7. String 类的常用字符串方法

    public class Page106 { /** * 字符串练习第五章 * @param args */ public static void main(String[] args) { Stri ...

  8. Oracle列操作引起的全表扫描

    首先是一种比较明显的情况: select * from table where column + 1 = 2 这里对column进行了列操作,加1以后,与column索引里的内容对不上,导致colum ...

  9. 多校3-Magician 分类： 比赛 2015-07-31 08:13 4人阅读 评论(0) 收藏

    Magician Time Limit: 18000/9000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  10. 使用NPOI随意创建Excel(含下拉列表)

    //创建工作簿 HSSFWorkbook ssfworkbook = new HSSFWorkbook(); //创建工作表(页) HSSFSheet sheet1 = ssfworkbook.Cre ...