JavaScript 中的上一个按钮不起作用

Question

我想用 Javascript 创建一个带有两个按钮“下一个”和“上一个”的滑块。下一个按钮可以使用，但上一个按钮不能使用。这是我的代码：let myImage = document.getElementById('mainImage');        let images = ["./img/th01.jpg", "./img/th02.jpg", "./img/th03.jpg", "./img/th04.jpg", "./img/th05.jpg"];        let imageIndex = 1;        function next(){            myImage.setAttribute('src', images[imageIndex]);            imageIndex++;            if (imageIndex >= images.length) {                imageIndex = 0;            }        }        function previous(){            myImage.setAttribute('src', images[imageIndex]);            imageIndex--;            if (imageIndex <= 0) {                imageIndex = images[imageIndex];            }        }<div id="wrapper">        <img src="./img/th01.jpg" id="mainImage">        <br>        <br>        <button onclick="previous()">Previous</button>        <button onclick="next()">Next</button>    </div>有什么帮助吗？

Answer 1

您的next按钮也无法正常工作。这两个函数的问题在于，您在更改后src更改了索引，因此新的索引src将反映最后一次imageIndex单击按钮之后的内容，而不是刚刚发生的单击。（并且由于硬编码为从 1 开始，因此第一次单击始终会执行“下一步”按钮应该执行的操作）imageIndex

初始化为0，并在设置之前imageIndex更改它。src

另外，不要使用内联处理程序，它们有一个疯狂的作用域链，需要全局污染，并且有引用转义问题。改用addEventListener：

let myImage = document.getElementById('mainImage');

let images = ["./img/th01.jpg", "./img/th02.jpg", "./img/th03.jpg", "./img/th04.jpg", "./img/th05.jpg"];

let imageIndex = 0;

const [prev, next] = document.querySelectorAll('button');

next.addEventListener('click', () => {

  imageIndex++;

  if (imageIndex === images.length) {

    imageIndex = 0;

  }

  myImage.src = images[imageIndex];

});

prev.addEventListener('click', () => {

  imageIndex--;

  if (imageIndex === -1) {

    imageIndex = images.length - 1;

  }

  myImage.src = images[imageIndex];

});

<div id="wrapper">

  <img src="./img/th01.jpg" id="mainImage">

  <br>

  <br>

  <button>Previous</button>

  <button>Next</button>

</div>