Question

这是我的代码的一部分，当有人进入我的页面时，我希望图像在网格中随机播放。也许我没有将数组与网格连接。我想弄清楚网络语言。请帮忙！谢谢这是草案

 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>
`

Answer 1

实际上，我没有太多关于这些事情的信息。但在过去，我想用点击进行幻灯片放映。我所做的就是：

获取阵列中的所有图像
定义计数器
counter ++或counter--按钮点击
使用images [counter]

如果我理解正确，您可以创建图像组数组，但存储图像路径。仅使用几个img标记中的一个并更改其属性。如果您使用多个，则可以通过ID

我希望我理解你，这些可能有所帮助。

Answer 2

我不完全确定这是否是你需要的，但这是我在Javascript中编写的东西（使用JQuery）。

它使用图像数组随机更改html元素组的背景。

JavaScript（使用JQuery）

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;
        });
    }

HTML

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

从这里借用预载部分：Preloading images with jQuery

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

2 个答案:

JavaScript（使用JQuery）

HTML