0

这是我在这里的第一个问题，我认为它必须有一个简单的答案，但这让我很沮丧，特别是因为我是 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]
  }
}
}

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

4

1 回答 1

3

您的最后一个 changeImage 立即转到＃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>
于 2013-09-29T01:58:41.630 回答