Question

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

的末尾

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

     });

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

Heres a fiddle

Answer 1

关于JSFiddle的一个棘手问题是放置脚本的地方。看起来你的脚本很难将事件绑定到DOM，因为JSFiddle在页面加载时立即加载它。这可能与您在当地经历的事情有关，也可能没有。

尽管如此，我在这里稍微修改了你的JSFiddle：JSFiddle。请注意，我添加了firstMove布尔值，然后启用或禁用以下脚本：

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

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

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

Answer 2

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

您将currentImage设置为1而不是0，并且索引为0。所以你想要的图像再也不会被看见，所以永远不会发生褪色。

我也检查它是否有'notseen'类，但检查隐藏应该是一样好。

这是我的最新修补程序，您应该会看到它通常有效：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();
    }

};

360度图像旋转的指示器

2 个答案: