0

所以我有一些javascript,当一个人点击并拖动或拖动他们的手指(在移动设备上)并循环浏览一系列图像以创建360度图像旋转效果时。这是代码。

    $(document).ready(function ($) {
    var $product = $('#product'),
        $imgs = $product.find(".child"),
        imageTotal = $imgs.length - 1,
        clicked = false,
        widthStep = 20,
        currPos,
        currImg = 0,
        lastImg = 0;
    $imgs.bind('mousedown', function (e) {
        e.preventDefault(); // prevent dragging images
    })
        .filter(':gt(0)').addClass('notseen');

    $product.bind('mousedown touchstart', function (e) {
        if (e.type == "touchstart") {
            currPos = window.event.touches[0].pageX;
        } else {
            currPos = e.pageX;
        }
        clicked = true;

    });
    $(document)
        .bind('mouseup touchend', function () {
        clicked = false;
    })
        .bind('mousemove touchmove', function (e) {
        if (clicked) {
            var pageX;
            if (e.type == "touchmove") {
                pageX = window.event.targetTouches[0].pageX;
            } else {
                pageX = e.pageX;
            }
            widthStep = 20;
            if (Math.abs(currPos - pageX) >= widthStep) {
                if (currPos - pageX >= widthStep) {
                    currImg++;
                   if (currImg > imageTotal) {
                     currImg = 0;}
                } else {
                    currImg--;
                    if (currImg < 1) {
                        currImg = imageTotal;
                    }
                }
                currPos = pageX;
                $imgs.eq(lastImg).addClass('notseen');
                $imgs.eq(currImg).removeClass('notseen');
                lastImg = currImg;
                // $obj.html('<img src="' + aImages[options.currImg] + '" />');
            }
        }
    });
});

现在以此为基础,我想模拟加载文档后鼠标或手指被拖动一定距离,我想模拟这个功能来创建自动旋转。

现在我知道我需要在其中使用mousedown/touchstartandmousemove/touchmove函数,但是从那里我有点迷失了如何启动它并设置模拟距离。任何想法和帮助表示赞赏。

4

1 回答 1

1

一种简单的方法是重构您的代码以将 touchstart 和 touchmove 公开为它们自己的函数/对象。

这将允许您在任何情况下从任何地方调用它们,而不必依赖实际触发的事件。

我最近读了一篇很棒的文章,其中解释了一些关于如何有效地做到这一点的建议:https ://shanetomlinson.com/2013/testing-javascript-frontend-part-1-anti-patterns-and-fixes/

于 2013-05-16T20:08:16.843 回答