javascript - 通过单击按钮更改 javascript 中的 img src

Question

这是我的代码: 我想通过单击按钮来更改 img src，并将一个添加到再次更改下一张照片的计数器，但只显示第一张照片! 和 我在此路径中有 8 张图片:images/slides/writing${0-7};

slider = () =>{
    let i=0;
      let slides = document.getElementById('slides').getElementsByTagName('img')[0];
    slides.src = `images/slides/writing${i}.jpg` ; 
    i++
    
   
}

  
<section id="slides">
        <picture>
          <img src="" alt="Slide img">
          <input type="button" value="change" onclick="slider()">
      </picture>
 </section>

Answer 1

您总是在函数内将 i 设置为 0，只需将其设置为全局并确保它不超过 7:

let i=0;
slider = () =>{
    if(i==8) i=0;
    let slides = document.getElementById('slides').getElementsByTagName('img')[0];
    slides.src = `images/slides/writing${i}.jpg` ; 
    i++
}