zoukankan      html  css  js  c++  java
  • 基于jQuery的移动轮播图(支持触屏)

    移动轮播图我看到两款,

    一款是无线天猫的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>
  • 相关阅读:
    1.Python基础语法
    Python学习4:商城购物
    Python学习3:猜年龄游戏进阶版
    Python学习2:猜年龄游戏
    python学习1:判断学生成绩等级
    K8S集群平滑回退或升级
    Xtrabackup工作原理
    Android App 侧边栏菜单的简单实现
    NoActionBar主题下如何添加OptionsMenu
    TabLayout+ViewPager制作简单导航栏
  • 原文地址:https://www.cnblogs.com/samwu/p/3641968.html
Copyright © 2011-2022 走看看