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>