用Javascript单击它以改变图片

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

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语句做到这一点，但我不能（如果有人告诉我它是否可以用一个以及如何完成），也不会感激。作为最后一次尝试我想这一点，但由于某种原因，从图像1跳转到一次图像4：

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] 
    } 
} 
}

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

来源

2013-09-29 which1ispink

您最后的changeImage会立即转到＃4，因为您正在更改for循环中的图像，导致循环内的检查保持为真，因此它一直运行到最后一个索引，此时检查最终失败。相反，您需要使用变量来维护当前的图像索引。然后，只需在每次点击时将myImage.src更改为图像[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-29 01:58:41 Chad

用Javascript单击它以改变图片

回答

相关问题