javascript - 使用javascript将图像更改为其他图像并从最后一个图像重复到第一个图像

Question

我想要一个 javascript/html 代码在单击我的页面中的图像时更改为我的源文件中的其他图像并重复执行（当显示最后一张图像时，再次[点击]到第一张图像）而不刷新。

Answer 1

尽管有很多方法可以做到这一点，但您可以使用类似下面的方法来完成此操作。最简单的方法可能是让您的图像名称除了递增变量之外相同，但这取决于您。

<img id="myImage" src="image.jpg"/>
<input type="button" onclick="changeImage();" value="Change Image"/>
<script>
  //This array holds all my image paths (hardcoded)
  var images=new Array();
    images[0]="myImage.jpg";
    images[1]="myImage2.jpg";
    images[2]="myThirdImage.jpg";
  var counter=0;

  function changeImage(){
    //Change image and increment counter
    document.getElementById("myImage").src=images[counter++ % images.length];
  }
</script>

此外，这取决于您希望此功能如何发挥作用（带有左/右箭头的图像在图像列表中循环）。

编辑：感谢Fizz的 mod 建议。