Displaying 2sets of different images randomly

Question

I have 2 sets of different images.

first set is: img1.jpg, img2.jpg, img3,jpg

second set is: imga.jpg, imgb.jpg, imgc.jpg

Also I have three different divs #one, #two, #three.

The every set of images must follow the sequence. img1.jpg must embed into div #one, img2.jpg must embed into div #two & img3.jpg must embed into div #three.

Same thing must happen for 2nd set of images too. But image sets will change randomly.

I want to show image sets randomly. Means, when user will login, they might see 1st set of images, after refresh they might see 2nd set of images.

Note: I am not allowed to use css 'background-image'

Thanks in advance

Answer 1

You might try to decide between the image sets dynamically with Math.random() and then use the one randomly selected to display your images:

var arr1 = ["1.jgp", "2.jgp", "3.jgp"];
var arr2 = ["4.jgp", "5.jgp", "6.jgp"];

var currentArr = Math.random() < 0.5 ? arr1 : arr2;

$.each(currentArr, function(i, val){
  $('#yourContainer').append('<img src="'+val+'"/>');
});

EDIT1:

If you have more than two arrays your could try something like this:

var arrays = [arr1, arr2, ...];
var currentArr = arrays[Math.floor(Math.random() * arrays.length)];