手机端jQuery触屏滑动图片切换特效代码5513
手机端jQuery触屏滑动图片切换代码是一款触屏滑动图片左右滚动展示代码。
(function ($) {
    $.fn.leftScroll = function (option) {
        var data = {
            isOneScreen: true,
            isScroll: true
        };
        var options = $.extend(data,option);
        this.each(function () {
            var that = this;
            var len = $(this).find(".leftScroll_picBox").length;
            var clone = $(this).find(".leftScroll_picBox").clone(true);
            var clone2 = $(this).find(".leftScroll_picBox").clone(true);
            $(this).children().append(clone);
            $(this).children().append(clone2);
            var width = $(this).find(".leftScroll_picBox").eq(0).innerWidth();
            var left = len;
            var container = $(this).children();
            container.css("left",(-left*width)+"px");
            var touch1,touch2,pageX1=0,pageX2=0,pageY1=0,pageY2=0;
            var startHandle = function (that) {
                container.addClass("transition");
                touch1 = that.originalEvent.touches[0];
                pageX1 = touch1.pageX;
                pageY1 = touch1.pageY;
            };
            var moveHandle = function (that) {
                touch2 = that.originalEvent.touches[0];
                pageX2 = touch2.pageX;
                pageY2 = touch2.pageY;
                if(Math.abs(pageY2-pageY1)>Math.abs(pageX2-pageX1)){
                    return
                }else {
                    that.preventDefault();
                    container.css("left",((-left*width)+(pageX2 - pageX1))+"px");
                }


            };
            var endHandle = function (that) {
                var deltaX = pageX2 - pageX1;
                var deltaY = pageY2 - pageY1;
                if(Math.abs(deltaY)>Math.abs(deltaX)){
                    container.css("left",(-left*width)+"px");
                    return
                }else {
                    if(deltaX<0){
                        if(left<((len*2)+1)){
                            left=left+1;
                            container.css("left",(-left*width)+"px");
                            if(left===((len*2)+1)){
                                setTimeout(function () {
                                    container.removeClass("transition");
                                    container.css("left",-len*width);
                                    left = len;
                                },200)
                            }
                            $(that).on("touchstart",startHandle)
                        }
                    }else {
                        if(left>0){
                            left=left-  1;
                            container.css("left",(-left*width)+"px");
                            if(left===0){
                                setTimeout(function () {
                                    container.removeClass("transition");
                                    container.css("left",-len*width);
                                    left = len;
                                },200);
                                $(that).on("touchstart",startHandle)
                            }
                        }
                    }
                }

            };
            if(options.isScroll===true){
                $(that).on("touchstart",startHandle);
                $(that).on("touchmove",moveHandle);
                $(that).on("touchend",endHandle);
            }
        });
    }
})(jQuery);
      立即下载 ( 文件大小:0.16 M)

    浏览器兼容性

    1. IE 8
    2. IE 9
    3. Mozilla Firefox
    4. Google Chrome
    5. Oper
    6. Safari

    技术讨论区

    1. 请先登录

        发 布

    键盘快捷键: 上一个 下一个