Javascript 阵列幻灯片

Question

我对 Javascript 非常陌生，并且无法让简单的数组幻灯片工作。 我的计划是让左右按钮更改图像的src 。 我在网上拍摄了不同幻灯片的不同部分来尝试制作这个。 我现在遇到的具体问题是按钮似乎没有做任何事情。 我认为他们会在点击时执行我的 function ，但我认为我的语法不正确，或者其他东西不正确。 任何帮助表示赞赏，但如果解决方案不需要我使用 jQuery 或 PHP，我更喜欢它，因为我对 JS 还是很陌生。 谢谢。

 var images = [ "Gallery/1.jpg", "Gallery/2.jpg", "Gallery/3.png", "Gallery/4.jpg", "Gallery/5.jpg", "Gallery/5-1.jpg", "Gallery/6.jpg", "Gallery/7.jpg", "Gallery/8.jpg", "Gallery/9.jpg", "Gallery/10.jpg", "Gallery/11.jpg", "Gallery/12.jpg", "Gallery/13.jpg", "Gallery/14.jpg", "Gallery/15.jpg", "Gallery/16.jpg", "Gallery/17.jpg", "Gallery/18.jpg", "Gallery/19.jpg", "Gallery/20.jpg", "Gallery/21.jpg", "Gallery/22.jpg", "Gallery/23.jpg", "Gallery/24.jpg", "Gallery/25.jpg", "Gallery/26.jpg", "Gallery/27.jpg", "Gallery/28.jpg", "Gallery/29.jpg", "Gallery/30.jpg", "Gallery/31.jpg", "Gallery/32.jpg", "Gallery/33.jpg", "Gallery/34.jpg", "Gallery/35.jpg", "Gallery/36.jpg", ]; var index = 0; function changeImg(direction) { document.slide.src = images[index]; if (direction == left) { if (index == 0) { index = 35; } else { index--; } } if (direction == right) { if (index == 35) { index = 0; } else { index++; } } }

 <div id="slideshow"> <img name="slide" src="Gallery/1.jpg"> </div> <input type="button" value="<" onclick="changeImg(left);" /> <input type="button" value=">" onclick="changeImg(right);" />

Answer 1

我可以看到您在来自 HTML 的 function 调用中左右传递，但是在 HTML 中没有类似的东西，而是应该将它们作为字符串传递，如下所示：

<input type="button" value="<" onclick="changeImg('left');" />
<input type="button" value=">" onclick="changeImg('right');" />

并且当您检查脚本中的条件时，请执行以下操作 === 和 '' 更改

var index = 0;

      function changeImg(direction) {
        document.slide.src = images[index];

        if (direction === 'left') {
          if (index == 0) {
            index = 35;
          } else {
            index--;
          }
        }

        if (direction === 'right') {
          if (index == 35) {
            index = 0;
          } else {
            index++;
          }
        }
      }