Question

我正在尝试为我的网站制作图像滑块，但无法获得左右移动图像的按钮

这就是我要去的地方：https://jsfiddle.net/Narek_T/wsemLhtz/6/

$(".arrow-click").click(function() {
  var box = $(".image-container"),
    x;
  if ($(this).hasClass("arrow-right")) {
    x = ((box.width() / 2)) + box.scrollLeft();
    box.animate({
      scrollLeft: x,
    })
  } else {
    x = ((box.width() / 2)) - box.scrollLeft();
    box.animate({
      scrollLeft: -x,
    })
  }
})

这是我到目前为止的内容： https://jsfiddle.net/7qfpa245/

Answer 1

                <div class="image-container-outer">
                  <div class="left-scroll arrow-click arrow-left">&#8672;</div>
                  <div class="right-scroll arrow-click arrow-right">&#8674;</div>

                <div class="image-container">
                  <img src="https://images.ecosia.org/42-uZar58L8RQsWtZWq_TtJXV1A=/0x390/smart/http%3A%2F%2Fwallpapers-image.ru%2F1920x1080%2Fsummer%2Fwallpapers%2Fsummer-wallpapers-1920x1080-0001.jpg" alt="DW Image" class="port-image" />
                  <img src="https://images.ecosia.org/42-uZar58L8RQsWtZWq_TtJXV1A=/0x390/smart/http%3A%2F%2Fwallpapers-image.ru%2F1920x1080%2Fsummer%2Fwallpapers%2Fsummer-wallpapers-1920x1080-0001.jpg" alt="DW Image" class="port-image" />
                  <img src="https://images.ecosia.org/42-uZar58L8RQsWtZWq_TtJXV1A=/0x390/smart/http%3A%2F%2Fwallpapers-image.ru%2F1920x1080%2Fsummer%2Fwallpapers%2Fsummer-wallpapers-1920x1080-0001.jpg" alt="DW Image" class="port-image" />
                </div>
              </div>

所以问题出在您的HTML中。您正在检测“ arrow-click”类上的click事件，但随后检查了您的JavaScript中不存在的“ arrow-right”类。

将该类添加到HTML中即可滚动。

编辑：这是工作结果https://jsfiddle.net/k3jsx17f/的小提琴

edit2：这是香草JS版本的另一个JSFiddle（没有jQuery之类的库），如果您无法使jQuery工作（如果您问我，值得使jQuery工作），这可能会有所帮助https://jsfiddle.net/k3jsx17f/1/

edit3：所以您遇到的主要问题是了解如何将事件附加到HTML节点或jQuery对象。为了将事件附加到jQuery对象，您需要确保DOM已经呈现，以便您可以附加一些东西。这就是为什么需要将事件侦听器放置在document.ready函数中的内。这样做将使您的代码（将箭头单击元素附加到click事件上）等待执行，直到在DOM中加载并准备就绪。这是一个小问题，但是了解原因肯定会在将来帮助您进行Web开发。

如何使用JavaScript使工作图像滑块正常工作？

1 个答案: