Question

我需要做一些小练习来帮助我使用Javascript。我必须创建一个小页面，其中包含一个由Javascript生成的菜单以及一个图像源，单击该图像源后，该图像源将变为随机图像。如果下一个随机图像与之前的图像相同，则必须生成另一个随机图像。请问该怎么办？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Revision</title>
    </head>

    <body>
        <nav id="menu"></nav>
        <img id="image" width="300px" height="200px"/>
        <script src="js/mainScript.js"></script> 
        <script src="js/script.js"></script> 
    </body>
</html>

Javascript：

var imgArray = ["js/images/bmw1.JPG", "js/images/bmw2.jpg", 
"js/images/bmw3.jpg"];
var image = document.getElementById("image");
image.src = imgArray[0];

function changeImage()
{
    var i = imgArray.indexOf(this.getAttribute("src"));

    if(i < (imgArray.length-1))
        {
            i++;
            this.src = imgArray[i];
        }
    else
        {
            this.src = imgArray[0];
        }
}

image.addEventListener('click', changeImage);

按原样，代码将显示第一个图像，即BMW1.jpg，然后单击该图像，然后转到下一个图像BMW2.jpg，然后在BMW3.jpg上，然后重新开始

谢谢！

编辑：这不是重复的问题，因为这需要图像源是随机的，而不是数字。

Javascript-onClick随机图片

0 个答案: