360 度图像旋转指示器

Indicator for a 360 image rotation

本文关键字：指示器 旋转 图像      更新时间：2023-09-26

我有一个简单的360图像旋转器，它可以循环浏览一系列图像以创建旋转对象的效果。我想添加一个指示器，向用户显示您可以旋转在拳头图像过去后淡出的对象。所以我在360.js末尾添加了这个函数 

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

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

这是一个小提琴

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

您将 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();
    }
};

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

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

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

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

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

相关文章：