使用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建议。