Question

我希望images / r1.jpg，r2.jpg，r3.jpg，r4.jpg使用我在顶部写的相同数组。所以网格中的这五个图像作为一个部分将自动随机显示相同的内容。

引用我的行的另一个<div class="row">将执行相同的操作。我总共有5个部分。其他四个部分将有自己的内容。

我尝试了所有可以做的事情，并且我更改了id的内容，但它不起作用。

<script language="javascript">
    var picRoots = ['images/r1.jpg','images/r2.jpg','images/r3.jpg','images/r4.jpg','images/r5.jpg','images/r6.jpg','images/r7.jpg','images/r8.jpg','images/r9.jpg','images/r10.jpg'];
    picRoots.sort(function(){return Math.random()>0.5?-1:1;});
    var curPic = -1;
    //preload the images for smooth animation
    var imgO = new Array();
    for(i=0; i < picRoots.length; i++) {
        imgO[i] = new Image();
        imgO[i].src = picRoots[i];
    }

    function swapImage() {
        curPic = (++curPic > picRoots.length-1)? 0 : curPic;
        imgCont.src = imgO[curPic].src;
        setTimeout(swapImage,100);
    }

    window.onload=function() {
        imgCont = document.getElementById('imgBanner1');
        swapImage();
    }
</script>
<body>
    <div style="text-align:center" class="grid"> 
    <div class="row"> 
    <div class="image"> <img src="images/black.jpg" /> </div>
    <div class="image"> <img src="images/black.jpg" /> </div>
    <div class="image"> <img src="images/black.jpg" /> </div>
    <div class="image"> <img src="images/black.jpg" /> </div> 
    <div class="image"> <img src="images/r5.jpg" id="imgBanner1"/> </div> 
    <div class="image"> <img src="images/r1.jpg" /> </div> 
    <div class="image"> <img src="images/r2.jpg" /> </div> 
    <div class="image"> <img src="images/r3.jpg" /> </div> 
    <div class="image"> <img src="images/r4.jpg" /> </div>
    <div class="image"> <img src="images/black.jpg" /> </div>
    <div class="image"> <img src="images/black.jpg" /> </div>
    <div class="image"> <img src="images/black.jpg" /> </div>
    <div class="image"> <img src="images/black.jpg" /> </div>
    </div>  
</body>

在我的网站中随机交换图像

0 个答案: