如何使用javascript使工作图像滑块工作？

Posted 2021-04-12

我正在尝试为我的网站制作一个图像滑块，但我无法通过按钮（左和右）来移动图像

这就是我想要的：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/

答案

                <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中。您正在检测“箭头单击”类上的单击事件，但随后检查了javascript中不存在的“向右箭头”类。

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

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

edit2：这是一个vanilla JS版本的另一个JSFiddle（没有像jQuery这样的库）如果你不能让jQuery正常工作可能会有所帮助（如果你问我，值得努力让jQuery工作）https://jsfiddle.net/k3jsx17f/1/

edit3：所以你遇到的主要问题是理解如何将事件附加到HTML节点或jQuery对象。为了将事件附加到jQuery对象，您需要确保已呈现DOM，以便您可以附加某些内容。这就是您需要将事件侦听器放在document.ready函数中的原因。执行此操作将使您的代码在您将箭头单击元素附加到click事件的位置，等待它在执行之前加载并准备好在DOM中。这是一个小修复，但了解原因肯定会在未来帮助您的Web开发。