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

标签 javascript html css random grid

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

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

最佳答案

其实我对这些东西了解不多。但在过去，我想通过点击来制作幻灯片。我所做的只是:

  1. 获取数组中的所有图片
  2. 定义一个计数器
  3. counter++ 或 counter-- 在按钮点击时
  4. 用 images[counter] 改变 img 标签的 src 属性

如果我没理解错的话，你可以创建图像组数组，但存储图像路径。仅使用几个 img 标签中的一个并更改其属性。如果您使用多个，则可以通过 ID 访问它们

希望我对您的理解是正确的，这些可能会有所帮助。

关于javascript - 如何在网格中随机播放图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19872083/

上一篇：css - 对于非语义 HTML5 浏览器(IE6-8)，哪种方法是一种很好的回退方法？

下一篇：html - 从 Document.html() 写出时 jsoup textarea 格式发生变化

相关文章：

ios - 是否可以使用 CSS 设计原生 iOS 用户界面？

css - 如何在 chrome 开发者工具中重新加载单个文件

javascript - 在jquery中使用 'this'设置图像src

html - 列表样式图像在 .accordion .accordion-title 中未正确应用

Javascript:将数组转换为对象的最佳方法是什么？

Javascript 页内滚动偏移量

html - 我如何有条件地从稍后阅读服务(即 Instapaper、Pocket)中隐藏动态 Web 内容？

javascript - 如何实现JS从HTML到WordPress？

javascript - 自定义大小调整工具在 Canvas 绘图中不起作用

javascript - 如何设置文本框值以使用 javascript 上传文件名？

©2024 IT工具网  联系我们