Question

这是我在这里的第一个问题，我认为它必须有一个简单的答案，但它让我感到沮丧一段时间，特别是因为我是Javascript的新手。所以我有很多图像，并希望通过在网页上点击它来改变到下一个图像，显然从某个图像开始。现在我可以用嵌套的if else语句做到这一点，但是如果你有很多图像，你会得到太多的图像，它们会相互嵌套而且它会变得太复杂，所以我认为必须有一种更简单的方法。这是我的代码示例：

function changeImage() 
{
var image=document.getElementById("mainImage")

if (image.src.match("image1.jpg"))
{
  image.src="image2.jpg";
}
else if (image.src.match("image2.jpg"))
{
  image.src="image3.jpg";
}
else
{
  if (image.src.match("image3.jpg"))
  {
    image.src="image4.jpg";
  }
  else
  {
    image.src="image1.jpg";
  }
}
}

所以你可以看到它不是最好的方法。我尝试用switch语句来做这件事，但我也不能（如果有人告诉我是否可以用一个以及如何完成），我会很感激。作为最后一次尝试，我试过这个，但由于某种原因，它立刻从image1跳转到image4：

function changeImage()
{
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]
var myImage = document.getElementById("mainImage")

for (i=0; i < images.length; i++)
{
  if (myImage.src.match(images[i]))
  {
    myImage.src = images[i+1]
  }
}
}

所以我真的很感激一些帮助。提前谢谢。

Answer 1

您的上一次更改会立即转到＃4，因为您正在更改for循环中的图像，导致循环中的检查保持为真，因此它一直运行到最后一个索引，此时检查终于失败了。相反，您需要使用变量维护当前图像索引。然后，只需在每次单击时将myImage.src更改为images [currentIndex + 1]。尝试类似下面的内容。您需要在页面加载时运行showNextImage，然后在每次单击图像时运行一次。

<script>
var currentImageIndex = 0;

//Cycle through images
showNextImage() {
   var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]
   var myImage = document.getElementById("mainImage")

   myImage.src = images[currentImageIndex];

   currentImageIndex++;
   if(currentImageIndex >= images.length)
      currentImageIndex = 0;
}
</script>

使用Javascript单击更改图片

1 个答案: