移动轮播图我看到两款，

一款是无线天猫的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. 启动管理软件服务器时，提示midas.dll错误

    首先确认系统以及管理软件目录内是否有midas.dll文件,如果没有,请复制或下载midas.dll到相应目录.系统默认路径为:'c:\windows\system32\' 然后依次打开“开始菜单”内 ...

  2. zabbix用自带模板监控mysql

    本身zabbix-agent没有提供对mysql监控的key,所以需要自定义key来应用这个模板 默认的模板有以下三类 mysql.status[var] mysql.ping mysql.versi ...

  3. win7中搜索文件内容的方法

    打开“控制面板”,选择“大类别”或“小类别”,然后打开 “索引选项”.点击“高级”按钮,在弹出的对话框中打开“文件类型”标签,在下方的输入框中“将新扩展名添加到列表中”,添加要搜索的未知文本文件的扩展 ...

  4. Linux下后台程序完成自动输入密码等交互行为的例子

    今天要开发一个定时任务,然后加入cron列表中.但是有个问题摆在眼前,脚本的执行中需要输入数据库密码: mysql -u root -p << SQL use db; set names  ...

  5. Verilog HDL基础语法讲解之模块代码基本结构

    Verilog HDL基础语法讲解之模块代码基本结构   本章主要讲解Verilog基础语法的内容,文章以一个最简单的例子"二选一多路器"来引入一个最简单的Verilog设计文件的 ...

  6. 探秘腾讯Android手机游戏平台之不安装游戏APK直接启动法

    前言相信这样一个问题,大家都不会陌生,“有什么的方法可以使Android的程序APK不用安装,而能够直接启动”.发现最后的结局都是不能实现这个美好的愿望,而腾讯Android手机游戏平台却又能实现这个 ...

  7. 每日一九度之 题目1041：Simple Sorting

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4883 解决:1860 题目描述: You are given an unsorted array of integer numbers. ...

  8. lua代码优化（转）

    暂时转了别人一篇,以后再优化 1.使用局部变量local 这是最基础也是最有用的策略,虽然使用全局变量并不能完全避免,但还是应该尽量避免,取而代之使用局部变量即local.这里的局部变量也包括函数fu ...

  9. SIM卡应用-OPN，PLMN，SPN

    SIM卡应用 移动运营商已经将SIM卡用於很多不同的应用,下面列出了其中最主要的应 用∶ ·漫游应用∶确保手机可以在漫游之後选择缺省的运营商网络.一个SIM应用是可以在手机漫游到某个合作夥伴运营商网络 ...

  10. c# monitor锁

    当多个线程在并发的时候,难免会碰到相互冲突的事情,比如最经典的ATM机的问题,并发不可怕,可怕的是我们没有能力控制. 线程以我的理解可以分为三种 ① 锁. ② 互斥. ③ 信号. 好,这一篇主要整理“ ...