Javascript 错误 : function not executed, 也不确定图像数组是否已成功添加

Question

我是编码新手，正在为一个项目制作一个网站。我试过使用 html 和 js 编写幻灯片。我写的代码似乎没有做任何事情。我为幻灯片添加的按钮在那里，但我无法让它们执行它们的功能，而且我无法确定我添加的图像数组是否存在。

我已经尝试在我的知识允许的范围内尽可能多地移动代码，但在这一点上我放弃了。

HTML

<img src="images/a.jpg" alt="" id="slide" width="850" height="450">
<!--buttons-->
<input onclick="nextImage ()" type="button" class="next" value="Next"> </input>
<input onclick="prev" type="button" class="previous" value="Previous"> </input>

JavaScript

var myImage= document.getElementById('slide')
var imageArray=["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg" ];
var imageIndex= 1;

function nextImage (){
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >3 ){imageIndex=0;}

Answer 1

我会做这样的事情: 只需添加 2 个按钮即可简化 html

HTML

<img src="images/a.jpg" alt="" id="slide" width="850" height="450">


<button id="next"></button>
<button id="prev"></button>

JS

附加事件监听器，它将根据您单击的按钮调用您的下一个和上一个函数。函数内部的逻辑几乎保持不变，注意数组索引。像以前一样将您的 imageIndex 保持为全局。

  let myImage = document.getElementById('slide')
  let imageArray = ["images/a.jpg", "images/b.jpg", "images/c.jpg", "images/d.jpg"];
  let imageIndex = 1;

function nextImage() {
  myImage.setAttribute("src", imageArray[imageIndex]);
  imageIndex++;
  if (imageIndex === imageArray.length) {
    imageIndex = 0;
  }
}

function previousImage() {
  myImage.setAttribute("src", imageArray[imageIndex]);
  imageIndex--
  if (imageIndex === -1) {
    imageIndex = imageArray.length - 1;
  }
}


document.getElementById('next').addEventListener('click', () => nextImage())
document.getElementById('prev').addEventListener('click', () => previousImage())

没测试过，但逻辑应该没问题