Javascript 如何在网格中随机播放图像_Javascript_Html_Css_Random_Grid

Javascript 如何在网格中随机播放图像

javascript html css random grid

Javascript 如何在网格中随机播放图像,javascript,html,css,random,grid,Javascript,Html,Css,Random,Grid,这是我的部分代码，当有人进入我的页面时，我希望图像在网格中随机播放。也许我没有把阵列和网格连接起来。我正试图弄明白网络语言。请帮忙！谢谢这是草稿 body { background-color:black; } </style> <title>Lucky Tree</title> <link rel="stylesheet" type="text/css" href="style.css"> <

这是我的部分代码，当有人进入我的页面时，我希望图像在网格中随机播放。也许我没有把阵列和网格连接起来。我正试图弄明白网络语言。请帮忙！谢谢这是草稿

 body
    {
    background-color:black;
    }
</style>

    <title>Lucky Tree</title>
    <link rel="stylesheet" type="text/css" href="style.css">

<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/br16.jpg" /> </div>
<div class="image"> <img src="images/l3.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/l2.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/l10.jpg" /> </div> 
<div class="image"> <img src="images/l9.jpg" /> </div> 
<div class="image"> <img src="images/l8.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
</div> 

<div class="row"> 
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/l2.jpg" /> </div>
<div class="image"> <img src="images/br15.jpg" /> </div>
<div class="image"> <img src="images/br14.jpg" /> </div> 
<div class="image"> <img src="images/l4.jpg" /> </div> 
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/l1.jpg" /> </div> 
<div class="image"> <img src="images/bl3.jpg" /> </div> 
<div class="image"> <img src="images/br18.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div> 
<div class="image"> <img src="images/l7.jpg" /> </div> 
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
</div> 

<div class="row"> 
<div class="image"> <img src="images/bl1.jpg" /> </div>
<div class="image"> <img src="images/l1.jpg" /> </div>
<div class="image"> <img src="images/bl5.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div> 
<div class="image"> <img src="images/br13.jpg" /> </div> 
<div class="image"> <img src="images/l13.jpg" /> </div>
<div class="image"> <img src="images/t6.jpg" /> </div> 
<div class="image"> <img src="images/br17.jpg" /> </div> 
<div class="image"> <img src="images/bl6.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/br10.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
</div> 

<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/l5.jpg" /> </div> 
<div class="image"> <img src="images/br12.jpg" /> </div> 
<div class="image"> <img src="images/t5.jpg" /> </div> 
<div class="image"> <img src="images/l15.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/br9.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/bl2.jpg" /> </div>
</div> 

<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/br5.jpg" /> </div>
<div class="image"> <img src="images/l14.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/t4.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/bl4.jpg" /> </div> 
<div class="image"> <img src="images/br8.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
</div> 

<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/br4.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/t3.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/br7.jpg" /> </div> 
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/br11.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
</div>

<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/l6.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/br3.jpg" /> </div> 
<div class="image"> <img src="images/br1.jpg" /> </div> 
<div class="image"> <img src="images/t2.jpg" /> </div> 
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/br6.jpg" /> </div> 
<div class="image"> <img src="images/l11.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> 

<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/black.jpg" /> </div> 
<div class="image"> <img src="images/black.jpg" /> </div> 
<div class="image"> <img src="images/t1.jpg" /> </div> 
<div class="image"> <img src="images/br2.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 class="image"> <img src="images/black.jpg" /> </div>
</div> 

<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" /> </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>  
</div> 

<script>
var roots = new Array();

roots[0] = new Image();
roots[0].src = 'images/r1.jpg';

roots[1] = new Image();
roots[1].src = 'images/r2.jpg';

roots[2] = new Image();
roots[2].src = 'images/r3.jpg';

roots[3] = new Image();
roots[3].src = 'images/r4.jpg';

roots[4] = new Image();
roots[4].src = 'images/r5.jpg';

roots[5] = new Image();
roots[5].src = 'images/r6.jpg';

roots[6] = new Image();
roots[6].src = 'images/r7.jpg';

roots[7] = new Image();
roots[7].src = 'images/r8.jpg';

roots[8] = new Image();
roots[8].src = 'images/r9.jpg';

roots[9] = new Image();
roots[9].src = 'images/r10.jpg';

function randomImg() {
    var randomNum = (Math.floor((Math.random() * 1000000000)) % (roots.length - 1));
    document.body.style.backgroundImage = roots[randomNum];

}

setInterval(randomImg, 100);
randomImg();
/*------------------------------------*/

var trunks = new Array();

trunks[0] = new Image();
trunks[0].src = 'images/t1.jpg';

trunks[1] = new Image();
trunks[1].src = 'images/t2.jpg';

trunks[2] = new Image();
trunks[2].src = 'images/t3.jpg';

trunks[3] = new Image();
trunks[3].src = 'images/t4.jpg';

trunks[4] = new Image();
trunks[4].src = 'images/t5.jpg';

trunks[5] = new Image();
trunks[5].src = 'images/t6.jpg';

trunks[6] = new Image();
trunks[6].src = 'images/t7.jpg';

trunks[7] = new Image();
trunks[7].src = 'images/t8.jpg';

trunks[8] = new Image();
trunks[8].src = 'images/t9.jpg';

trunks[9] = new Image();
trunks[9].src = 'images/t10.jpg';

function randomImg() {
    var randomNum = (Math.floor((Math.random() * 1000000000)) % (trunks.length - 1));
    document.body.style.backgroundImage = trunks[randomNum];

}

setInterval(randomImg, 100);
randomImg();
/*------------------------------------*/

var branches = new Array();

branches[0] = new Image();
branches[0].src = 'images/br1.jpg';

branches[1] = new Image();
branches[1].src = 'images/br2.jpg';

branches[2] = new Image();
branches[2].src = 'images/br3.jpg';
branches
branches[3] = new Image();
branches[3].src = 'images/br4.jpg';

branches[4] = new Image();
branches[4].src = 'images/br5.jpg';

branches[5] = new Image();
branches[5].src = 'images/br6.jpg';

branches[6] = new Image();
branches[6].src = 'images/br7.jpg';

branches[7] = new Image();
branches[7].src = 'images/br8.jpg';

branches[8] = new Image();
branches[8].src = 'images/br9.jpg';
branches
branches[9] = new Image();
branches[9].src = 'images/br10.jpg';

branches[10] = new Image();
branches[10].src = 'images/br11.jpg';

branches[11] = new Image();
branches[11].src = 'images/br12.jpg';

branches[12] = new Image();
branches[12].src = 'images/br13.jpg';

branches[13] = new Image();
branches[13].src = 'images/br14.jpg';

branches[14] = new Image();
branches[14].src = 'images/br15.jpg';
branches
branches[15] = new Image();
branches[15].src = 'images/br16.jpg';

branches[16] = new Image();
branches[16].src = 'images/br17.jpg';

branches[17] = new Image();
branches[17].src = 'images/br18.jpg';

function randomImg() {
    var randomNum = (Math.floor((Math.random() * 1000000000)) % (branches.length - 1));
    document.body.style.backgroundImage = branches[randomNum];

}

setInterval(randomImg, 100);
randomImg();
/*------------------------------------*/

var leaves = new Array();

leaves[0] = new Image();
leaves[0].src = 'images/l1.jpg';

leaves[1] = new Image();
leaves[1].src = 'images/l2.jpg';

leaves[2] = new Image();
leaves[2].src = 'images/l3.jpg';

leaves[3] = new Image();
leaves[3].src = 'images/l4.jpg';

leaves[4] = new Image();
leaves[4].src = 'images/l5.jpg';

leaves[5] = new Image();
leaves[5].src = 'images/l6.jpg';

leaves[6] = new Image();
leaves[6].src = 'images/l7.jpg';

leaves[7] = new Image();
leaves[7].src = 'images/l8.jpg';

leaves[8] = new Image();
leaves[8].src = 'images/l9.jpg';

leaves[9] = new Image();
leaves[9].src = 'images/l10.jpg';

leaves[10] = new Image();
leaves[10].src = 'images/l11.jpg';

leaves[11] = new Image();
leaves[11].src = 'images/l12.jpg';

leaves[12] = new Image();
leaves[12].src = 'images/l13.jpg';

leaves[13] = new Image();
leaves[13].src = 'images/l14.jpg';

leaves[14] = new Image();
leaves[14].src = 'images/l15.jpg';

function randomImg() {
    var randomNum = (Math.floor((Math.random() * 1000000000)) % (leaves.length - 1));
    document.body.style.backgroundImage = leaves[randomNum];

}

setInterval(randomImg, 100);
randomImg();
/*------------------------------------*/

var blossoms = new Array();

blossoms[0] = new Image();
blossoms[0].src = 'images/bl1.jpg';

blossoms[1] = new Image();
blossoms[1].src = 'images/bl2.jpg';

blossoms[2] = new Image();
blossoms[2].src = 'images/bl3.jpg';

blossoms[3] = new Image();
blossoms[3].src = 'images/bl4.jpg';

blossoms[4] = new Image();
blossoms[4].src = 'images/bl5.jpg';

blossoms[5] = new Image();
blossoms[5].src = 'images/bl6.jpg';

blossoms[6] = new Image();
blossoms[6].src = 'images/bl7.jpg';

blossoms[7] = new Image();
blossoms[7].src = 'images/bl8.jpg';

blossoms[8] = new Image();
blossoms[8].src = 'images/bl9.jpg';

blossoms[9] = new Image();
blossoms[9].src = 'images/bl10.jpg';

function randomImg() {
    var randomNum = (Math.floor((Math.random() * 1000000000)) % (blossoms.length - 1));
    document.body.style.backgroundImage = blossoms[randomNum];

}

setInterval(randomImg, 100);
randomImg();
/*------------------------------------*/
</script>

</body>
`

正文
{
背景色：黑色；
}
幸运树
变量根=新数组（）；
根[0]=新图像（）；
根[0].src='images/r1.jpg'；
根[1]=新图像（）；
根[1].src='images/r2.jpg'；
根[2]=新图像（）；
根[2].src='images/r3.jpg'；
根[3]=新图像（）；
根[3].src='images/r4.jpg'；
根[4]=新图像（）；
根[4].src='images/r5.jpg'；
根[5]=新图像（）；
根[5].src='images/r6.jpg'；
根[6]=新图像（）；
根[6].src='images/r7.jpg'；
根[7]=新图像（）；
根[7].src='images/r8.jpg'；
根[8]=新图像（）；
根[8].src='images/r9.jpg'；
根[9]=新图像（）；
根[9].src='images/r10.jpg'；
函数randomImg（）{
var randomNum=（Math.floor（（Math.random（）*100000000））%（roots.length-1））；
document.body.style.backgroundImage=根[randomNum]；
}
设置间隔（随机img，100）；
随机img（）；
/*------------------------------------*/
var trunks=新数组（）；
中继[0]=新映像（）；
trunks[0].src='images/t1.jpg'；
中继[1]=新映像（）；
trunks[1].src='images/t2.jpg'；
中继[2]=新映像（）；
trunks[2].src='images/t3.jpg'；
中继[3]=新映像（）；
trunks[3].src='images/t4.jpg'；
trunks[4]=新映像（）；
trunks[4].src='images/t5.jpg'；
中继[5]=新映像（）；
trunks[5].src='images/t6.jpg'；
中继[6]=新映像（）；
trunks[6].src='images/t7.jpg'；
trunks[7]=新映像（）；
trunks[7].src='images/t8.jpg'；
trunks[8]=新映像（）；
trunks[8].src='images/t9.jpg'；
trunks[9]=新映像（）；
trunks[9].src='images/t10.jpg'；
函数randomImg（）{
var randomNum=（Math.floor（（Math.random（）*100000000））%（trunks.length-1））；
document.body.style.backgroundImage=trunks[randomNum]；
}
设置间隔（随机img，100）；
随机img（）；
/*------------------------------------*/
var分支=新数组（）；
分支[0]=新图像（）；
分支[0].src='images/br1.jpg'；
分支[1]=新图像（）；
分支[1].src='images/br2.jpg'；
分支[2]=新图像（）；
分支[2].src='images/br3.jpg'；
分支机构
分支[3]=新图像（）；
分支[3].src='images/br4.jpg'；
分支[4]=新图像（）；
分支[4].src='images/br5.jpg'；
分支[5]=新图像（）；
分支[5].src='images/br6.jpg'；
分支[6]=新图像（）；
分支[6].src='images/br7.jpg'；
分支[7]=新图像（）；
分支[7].src='images/br8.jpg'；
分支[8]=新图像（）；
分支[8].src='images/br9.jpg'；
分支机构
分支[9]=新图像（）；
分支[9].src='images/br10.jpg'；
分支[10]=新图像（）；
分支[10].src='images/br11.jpg'；
分支[11]=新图像（）；
分支[11].src='images/br12.jpg'；
分支[12]=新图像（）；
分支[12].src='images/br13.jpg'；
分支[13]=新图像（）；
分支[13].src='images/br14.jpg'；
分支[14]=新图像（）；
分支[14].src='images/br15.jpg'；
分支机构
分支[15]=新图像（）；
分支[15].src='images/br16.jpg'；
分支[16]=新图像（）；
分支[16].src='images/br17.jpg'；
分支[17]=新图像（）；
分支[17].src='images/br18.jpg'；
函数randomImg（）{
var randomNum=（Math.floor（（Math.random（）*100000000））%（branchs.length-1））；
document.body.style.backgroundImage=分支[randomNum]；
}
设置间隔（随机img，100）；
随机img（）；
/*------------------------------------*/
var leaves=新数组（）；
离开[0]=新图像（）；
leaves[0].src='images/l1.jpg'；
叶[1]=新图像（）；
leaves[1].src='images/l2.jpg'；
叶[2]=新图像（）；
leaves[2].src='images/l3.jpg'；
叶[3]=新图像（）；
leaves[3].src='images/l4.jpg'；
叶[4]=新图像（）；
leaves[4].src='images/l5.jpg'；
叶[5]=新图像（）；
leaves[5].src='images/l6.jpg'；
叶[6]=新图像（）；
leaves[6].src='images/l7.jpg'；
叶[7]=新图像（）；
leaves[7].src='images/l8.jpg'；
叶[8]=新图像（）；
leaves[8].src='images/l9.jpg'；
叶[9]=新图像（）；
leaves[9].src='images/l10.jpg'；
叶[10]=新图像（）；
leaves[10].src='images/l11.jpg'；
叶[11]=新图像（）；
leaves[11].src='images/l12.jpg'；
叶[12]=新图像（）；
leaves[12].src='images/l13.jpg'；
叶[13]=新图像（）；
leaves[13].src='images/l14.jpg'；
叶[14]=新图像（）；
leaves[14].src='images/l15.jpg'；
函数randomImg（）{
var randomNum=（Math.floor（（Math.random（）*100000000））%（leaves.length-1））；
document.body.style.backgroundImage=leaves[randomNum]；
}
设置间隔（随机img，100）；
随机img（）；
/*------------------------------------*/
var blooms=新数组（）；
Flowers[0]=新图像（）；
Flowers[0].src='images/bl1.jpg'；
Flowers[1]=新图像（）；
Flowers[1].src='images/bl2.jpg'；
Blooms[2]=新图像（）；
Flowsons[2].src='images/bl3.jpg'；
Blooms[3]=新图像（）；
Flowsons[3].src='images/bl4.jpg'；
Blooms[4]=新图像（）；
Flowsons[4].src='images/bl5.jpg'；
Flowers[5]=新图像（）；
Flowsons[5].src='images/bl6.jpg'；
Flowers[6]=新图像（）；
Flowsons[6].src='images/bl7.jpg'；
Blooms[7]=新图像（）；
Flowsons[7].src='images/bl8.jpg'；
Blossons[8]=新图像（）；
Flowsons[8].src='images/bl9.jpg'；
Blooms[9]=新图像（）；
Flowsons[9].src='images/bl10.jpg'；
函数randomImg（）{
var randomNum=（Math.floor（（Math.random（）*100000000））%（flowers.length-1））；
document.body.style.backgroundImage=blooms[randomNum]；
}
设置间隔（随机img，100）；
随机img（）；
/*-----
var pictures = ['1.png','2.jpg','3.jpg'];

    preload(pictures);

    setInterval(function(){
        swapPic($( ".row div" ));
    }, 500);

    function swapPic(parent_of_pics) {
        var length_of_list = parent_of_pics.length;
        var random_div = Math.floor( (Math.random()*length_of_list) );
        var random_pic = pictures[ Math.floor((Math.random()*pictures.length)) ]; 
        parent_of_pics.eq( random_div ).css({'background':'url(\''+random_pic+'\')'});
    }

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
        });
    }

<body>
<div class="row">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>
<div class="row">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>