基于jQuery的移动轮播图(支持手机触屏)

<!doctype html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="minimal-ui=yes,width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <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="http://v.114la.com/img/up_img/201606/146519857354513.jpg" />
            <img class="WSCSlide_img" src="http://v.114la.com/img/up_img/201606/146519860313352.jpg" />
            <img class="WSCSlide_img" src="http://v.114la.com/img/up_img/201606/146519881272796.jpg" />
        </div>
        <div class="WSCSlideStatus"></div>
    </div>


<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.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>

由于我看到的博客也是转载的,但他没有标明转载出处,我只能转载出处写他的。转载地址:https://blog.csdn.net/tzh9702/article/details/77989674

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值