Question

我对前端javascript（特别是DOM操作和JQuery）很陌生，我想实现一种效果，如果用户滚动鼠标滚轮页面上的图像发生变化，我就会发现最好的方法是轮子事件（我从this问题得到了）。我实现了它但滚动时没有任何反应，即使警报也无法正常工作。

如果答案的作者认为有必要，我会非常感谢任何帮助，甚至是其他信息。提前谢谢。

这是我到目前为止所做的事情：

<!DOCTYPE html>
<html>
    <head>
        <title>NERD</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>

    <body>

        <div id="Banner">
            <img id="Bimage" src="./images/Avatar.png" alt="Logo">
        </div>

        <script>
            var pages = ["./images/IMAGE1.png", "./images/IMAGE2.png", "./images/IMAGE3.png"],
            position = 0;

            document.getElementById("image").on('wheel', mouseHandler);

            function mouseHandler() {
                return function(e) {

                    if(e.originalEvent.deltaY < 0) {
                        position -= 1;
                        this.attr("src", pages[position]);
                    } else {
                        position += 1;
                        this.attr("src", pages[position]);
                    }
                }
            }

        </script>

    </body>
</html>

来自控制台的错误消息显示：无法读取属性＆＃39; on＆＃39;为null 在index.html：71

Answer 1

您的元素ID已错误，因此document.getElementById()会返回null，因此您在问题中提到错误。

但是，如果你修复了ID，你仍然会收到错误，因为你试图直接在DOM元素上调用jQuery .on()方法。请改用$("#Bimage").on(...)。

此外，在您的事件处理程序中不返回函数，只是直接执行您想要执行的操作。您的函数也尝试使用this.attr，它具有与上面相同的问题.attr()是jQuery方法但this是DOM元素，因此请改用$(this).attr()。< / p>

接下来，您不希望继续在1中添加或减去position，因为这样您就会超过数组的开头或结尾。你可能想要“包裹”到数组的另一端，所以我将为此显示代码。

此外，您可以将.attr()行移至if / else之后，而不是在每个分支中重复完全相同的事物。

最后，如果在转动滚轮时鼠标位于图像上方，您可能不希望整个页面滚动，因此请在事件处理程序中调用event.preventDefault()方法。（如果在鼠标位于其他位置时移动滚轮，则页面将正常滚动。）

将所有这些放在一起：

var pages = ["./images/IMAGE1.png", "./images/IMAGE2.png", "./images/IMAGE3.png"],
    position = 0;

$("#Bimage").on('wheel', mouseHandler);

function mouseHandler(e) {
  e.preventDefault();
  if (e.originalEvent.deltaY < 0) {
    position = position === 0 ? pages.length - 1 : position - 1;
  } else {
    position = (position + 1) % pages.length;
  }
  $(this).attr("src", pages[position]);
  // log current image name for demo purposes, because
  // this snippet doesn't have access to the images
  console.log(pages[position]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Banner">
  <img id="Bimage" src="./images/Avatar.png" alt="Logo">
</div>

更新：在评论中，OP询问是否在窗口中的任何位置滚动鼠标，而不是仅仅覆盖图像。这是在事件处理程序中使用wheel将window事件绑定到this然后而不是的问题（因为this引用了对象事件处理程序被绑定，绑定到图像时很好，但不适合window）。

展开/运行以下代码段以在上下文中查看：

var pages = ["./images/IMAGE1.png", "./images/IMAGE2.png", "./images/IMAGE3.png"],
    position = 0;

// save a reference to the image element, rather than continually
// reselecting it every time the `wheel` event occurs
var theImage = $("#Bimage");

$(window).on('wheel', mouseHandler);

function mouseHandler(e) {
  e.preventDefault();
  if (e.originalEvent.deltaY < 0) {
    position = position === 0 ? pages.length - 1 : position - 1;
  } else {
    position = (position + 1) % pages.length;
  }
  theImage.attr("src", pages[position]);
  // log current image name for demo purposes, because
  // this snippet doesn't have access to the images
  console.log(pages[position]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Banner">
  <img id="Bimage" src="./images/Avatar.png" alt="Logo">
</div>

更改车轮上的图像（无滚动条）

1 个答案: