0

我有一个简单的 360 度图像旋转器，它循环播放一系列图像以创建旋转对象的效果。我想添加一个指示器，向用户显示您可以旋转在第一个图像过去后淡出的对象。所以我将此功能添加到我的末尾360.js

(function(){
     if(
$('#first').css('visibility','hidden')) {
    $('#rotate').fadeOut();
} 
else {
    $('#rotate').fadeIn();
}

     });

脚本中没有错误，只是不检查图像是否可见。我尝试将它绑定到我调用的 mousedown 和 mousemove 事件，360.js但没有运气。有人对如何解决这个问题有任何想法吗？

这是一个小提琴

4

2 回答 2

1

除了我在评论中列出的内容之外，还有一个主要问题。

您将 currentImage 设置为 1，而不是 0，并且索引是基于 0 的。所以你想要的图像永远不会再可见，所以淡入永远不会发生。

我还检查它是否具有“未见”类，尽管检查隐藏应该同样好。

这是我的最新修复，您应该会看到它通常有效：http: //jsfiddle.net/y7WmA/6/

以下是重要的片段：

.bind('mousemove touchmove', function (e) {
    fadeInOut();
    // ...
        if (Math.abs(currPos - pageX) >= widthStep) {
            if (currPos - pageX >= widthStep) {
                currImg++;
                if (currImg > imageTotal) {
                    currImg = 0;
                }
            } else {
                currImg--;
                if (currImg < 0) {
                    currImg = imageTotal;
                }
            }
// ...
function fadeInOut() {
    if ($('#first').hasClass('notseen')) {
        console.log("hidden");
        $('#rotate').fadeOut();
    } else {
       console.log("visible");
        $('#rotate').fadeIn();
    }

};
于 2013-10-07T16:02:56.107 回答
1

JSFiddle 的一个棘手问题是它放置脚本的位置。似乎您的脚本难以将事件绑定到 DOM，因为 JSFiddle 在页面加载时立即加载它。这可能与您在当地的经历有关，也可能无关。

不过，我在这里稍微修改了您的 JSFiddle：JSFiddle。请注意，我添加了一个 firstMove 布尔值，然后启用或禁用以下脚本：

   if (!firstMove) {
        $('#rotate').fadeOut()
        firstMove = true;
    }

您的占位符在第一次移动后立即消失。最终，我想找到一种方法来避免使用布尔跟踪器，但这应该会让你朝着正确的方向前进！

编辑：还请注意，您当前的版本每次在图像上发生移动时都会执行评估，这可能会很昂贵，尤其是在使用 jQuery 选择器时。

于 2013-10-07T15:52:05.373 回答