How to play images randomly in grid
Question
Here's part of my code, when someone enter my page, I want the images playing randomly in grid. Maybe I didn't connect the array with grid. I am trying to figure out the web language. PLEASE Help! Thanks this is the draft
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>
`
2 answers
solution1
0 2013-11-09 11:21:12
Actually, I don't have much information about these things. But in past, I've wanted to make a slide show with clicks. All I've done was:
- Get all images in an array
- Define a counter
- counter++ or counter-- at button clicks
- Change img tag's src property with images[counter]
If I understood right, you can create image group arrays, but store the image path. Use only one of a few img tags and change their properties. If you use more than one, you can access them by ID's
I hope I understood you right and these may help.
solution2
0 2013-11-16 07:07:25
I'm not completely sure if this is what you need, but here's something I wrote in Javascript (with JQuery).
It randomly changes the backgrounds of groups of html elements using an array of images.
JavaScript (with 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>
Borrowed the preload portion from here: Preloading images with jQuery
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Crossfade a 6 images grid randomly, one by one
How to play audio files randomly and separately in JS
How to play randomly chosen music using JS?
javascript - How to randomly activate multiple cells in grid
how to populate a 3 x 3 grid randomly in java script?
How to display images in ul li randomly
how to onclick for pairs of images randomly in javascript?
How to create a Google Form with randomly selected images?
How to randomly change urls and images with javaScript code?
How to make images appear randomly in Javascript?
Related Tags