Question

重新加载页面时，我需要制作一个包含随机图像的3x3表。

这是我的代码，但它会更改所有9个单元格。我真正想做的是为不同池中的每个单元拍照。例如，单元格1.1只能从img1文件夹中拍照，而1.2只能从img2文件夹中拍照，等等。

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="CSS.css" type="text/css" />
    <title>Random</title>
</head>

<body onload="addEventListeners();">

    <div id="table">
        <table align=center>
            <tr>
                <td><img class="element" id="image1" src="img/1.jpg" /></td>
                <td><img class="element" id="image2" src="img/2.jpg" /></td>
                <td><img class="element" id="image3" src="img/3.jpg" /></td>
            </tr>
            <tr>
                <td><img class="element" id="image4" src="img/4.jpg" /></td>
                <td><img class="element" id="image5" src="img/5.jpg" /></td>
                <td><img class="element" id="image6" src="img/6.jpg" /></td>
            </tr>
            <tr>
                <td><img class="element" id="image7" src="img/7.jpg" /></td>
                <td><img class="element" id="image8" src="img/8.jpg" /></td>
                <td><img class="element" id="image9" src="img/9.jpg" /></td>
            </tr>
        </table>
    </div>

    <script>
        var imagelist = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg"];


        function diffImage() {
            var output = '';
            whichImage = Math.floor(Math.random() * imagelist.length);
            output = imagelist[whichImage];
            imagelist.splice(whichImage, 1);
            return output;
        }

        document.getElementById("image1").src = diffImage();
        document.getElementById("image2").src = diffImage();
        document.getElementById("image3").src = diffImage();
        document.getElementById("image4").src = diffImage();
        document.getElementById("image5").src = diffImage();
        document.getElementById("image6").src = diffImage();
        document.getElementById("image7").src = diffImage();
        document.getElementById("image8").src = diffImage();
        document.getElementById("image9").src = diffImage();
        document.getElementById("image10").src = diffImage();
        document.getElementById("image11").src = diffImage();
        document.getElementById("image12").src = diffImage();

    </script>
</body>

</html>

Answer 1

// you want three pools so let’s create three pools
var imagePools = [
      // your images from folder 1
      ["https://placekitten.com/201/140", "https://placekitten.com/199/140", "https://placekitten.com/200/140"],
      // your images from folder 2
      ["https://placekitten.com/g/201/140", "https://placekitten.com/g/199/140", "https://placekitten.com/g/200/140"],
      // your images from folder 3
      ["https://placekitten.com/201/140", "https://placekitten.com/199/140", "https://placekitten.com/200/140"],
];


function diffImage(pool) {
    // get the pool
    var pool = imagePools[pool];
    return pool[Math.floor(Math.random() * pool.length)];
}
var imgElementCount = 9;

for (var i = 1; i < imgElementCount + 1; i++) {
    // this will always get you an integer of 1, 2 or 3
    var pool = (i - 1) % 3;
    document.getElementById("image"+i).src = diffImage(pool);
}

    <div id="table">
    <table align=center>
        <tr><td><img class="element" id="image1" src="img/1.jpg" /></td>
        <td><img class="element" id="image2" src="img/2.jpg" /></td>
        <td><img class="element" id="image3" src="img/3.jpg" /></td>
        </tr>
        <tr><td><img class="element" id="image4" src="img/4.jpg" /></td>
        <td><img class="element" id="image5" src="img/5.jpg" /></td>
        <td><img class="element" id="image6" src="img/6.jpg" /></td>
        </tr>
        <tr><td><img class="element" id="image7" src="img/7.jpg" /></td>
        <td><img class="element" id="image8" src="img/8.jpg" /></td>
        <td><img class="element" id="image9" src="img/9.jpg" /></td>
        </tr>
        </table>
    </div>

这可能是一个可行的解决方案。注释中有解释。

Answer 2

只需随机排列数组，然后分配img1 = arr[0]，img2 = arr[1]，依此类推。对于随机播放，您可以使用以下代码：

function shuffleArray(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

从图像拉随机img

2 个答案: