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

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

这就是我想要的：

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

⇠
⇢

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

将该类添加到HTML中会导致滚动

编辑：这里是一个工作结果的小提琴

edit2：这里是另一个JSFIDLE的普通JS版本（没有像jQuery这样的库），如果你不能让jQuery工作，它可能会有所帮助（如果你问我，让jQuery工作是值得的）

---

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

非常感谢你，但我似乎还是无法让它发挥作用。在其他地方肯定还有另一个问题：（嗨，乔纳森，我已经编辑了我的答案来链接一个JSFIDLE，这样你就可以看到它正在工作。如果你还需要帮助，请告诉我。（另外，我刚刚注意到我把arrow的类倒过来了，我已经更新了答案来反映这一点，我很抱歉（（它仍然应该工作）））这真的让我很沮丧！现在所有的代码都是正确的，我现在知道我在链接jQuery或其中一个文件时遇到了问题。我对javascript和jQuery非常陌生，我正在努力解决它。我有点困惑，因为我的一些javascript在“javascript.js”中工作文件，但此滑块似乎链接不正确。编辑：这是我的部分：听起来您在导入jQuery时遇到了问题。我检查了您的引用，但效果很好。您是在JSFIDLE中编写此代码还是使用桌面IDE？我在PC上使用Atom editor。这就是我的javascript.js看起来是：（）。我一直在努力找出问题出在哪里。我敢打赌最后很简单。你帮了我很大的忙，非常感谢：）奇怪的是，有些代码在javascript.js中可以工作，有些代码即使在jsfiddle中也不能工作

$(".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,
    })
  }
})

                <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>