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

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

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

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

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

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