移动轮播图我看到两款，

一款是无线天猫的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. stc89c52开发板遥控器解码 红外线发射 内置 eeprom 存储 串口显示编码

    单片机,大概三年前,就买了一本 <爱上单片机> 最后就学会,用面包板了,编程书上基本没讲. 看原理图,看时序图,看数据手册, 都没讲. 而且书上自带的代码写的很烂. 1,缩近控制不好 2, ...

  2. Java中Synchronized的用法

    原文:http://blog.csdn.net/luoweifu/article/details/46613015 作者:luoweifu 转载请标名出处 <编程思想之多线程与多进程(1)——以 ...

  3. ios app的真机调试与发布配置

    1.打开应用程序—>[钥匙串访问]—>[证书助理]—>[从证书办法机构请求证书]     2.在[用户电子邮件地址]填入apple账户用的邮箱,选择[存储到磁盘],点击[继续],会在 ...

  4. 荒木毬菜 小情歌日文版 - 独身OL之歌

    咎(とが)めるつもりもないけどtogameru tumorimo naikedo并不想责备在身旁 暇(ひま)してる时间(じかん)をhimashiteru jikan wo无所事事的时间 パジャマの鸟( ...

  5. 七牛开发文档php

    http://developer.qiniu.com/docs/v6/sdk/php-sdk.html#overview http://developer.qiniu.com/docs/v6/sdk/ ...

  6. linux命令：du 命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  7. [转]android使用shape stroke描边只保留底部

    在项目中遇到这种情况:由于一些原因,自己需要用LinearLayout的垂直布局做出ListView的那种效果,但是ListView是自带了分割线的,而且顶部底部都是没有分割线的,每个item中间都是 ...

  8. hiho 第1周 最长回文子串

    题目链接:http://hihocoder.com/problemset/problem/1032 #include <bits/stdc++.h> using namespace std ...

  9. 编译器错误消息: CS0016: 未能写入输出文件“c:/Windows/Microsoft.NET/Framework/v2.0.50727/....dll”--“拒绝访问。

    错误如下: “/”应用程序中的服务器错误. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS0016: 未能写入 ...

  10. CentOS 安装SolrCloud

    1.什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时候是不 ...