Javascript – Random Image Rotator

Single image loader, the simplest way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>                                                                
<head>
  
</head>
   
<body>
 
RANDOM IMAGE LOADER<br>
Reload the page to change image<br>
 
<script language="JavaScript">
// Random variable from 0 to 14
// The souce images are image0.jpg ... image14.jpg
// Math.random() return a value between 0 and 1
// Math.floor() function returns the largest integer less than or equal to a number
var ran = Math.floor(15 * Math.random());
// Write the random variable
document.write('The random image is the number: ' + ran + '<br>');
// Write the image, the result must be: <img src="css/images-gimme-code-2013-0038/image3.jpg">
document.write('<img src=' + '"' + 'css/images-gimme-code-2013-0038/image' + ran + '.jpg">');
</script>
 
</body>
   
</html>
DEMO

 

Single image loader using Array:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>                                                                
<head>
  
</head>
   
<body>
 
RANDOM IMAGE LOADER<br>
Reload the page to change image<br>
 
<script language="JavaScript">
// Random variable from 0 to 14
// The souce images are image0.jpg ... image14.jpg
// Math.random() return a value between 0 and 1
// Math.floor() function returns the largest integer less than or equal to a number
var ran = Math.floor(15 * Math.random());
 
// Array of images START
img = new Array()
img[0] = '<img src="css/images-gimme-code-2013-0038/image0.jpg">';
img[1] = '<img src="css/images-gimme-code-2013-0038/image1.jpg">';
img[2] = '<img src="css/images-gimme-code-2013-0038/image2.jpg">';
img[3] = '<img src="css/images-gimme-code-2013-0038/image3.jpg">';
img[4] = '<img src="css/images-gimme-code-2013-0038/image4.jpg">';
img[5] = '<img src="css/images-gimme-code-2013-0038/image5.jpg">';
img[6] = '<img src="css/images-gimme-code-2013-0038/image6.jpg">';
img[7] = '<img src="css/images-gimme-code-2013-0038/image7.jpg">';
img[8] = '<img src="css/images-gimme-code-2013-0038/image8.jpg">';
img[9] = '<img src="css/images-gimme-code-2013-0038/image9.jpg">';
img[10] = '<img src="css/images-gimme-code-2013-0038/image10.jpg">';
img[11] = '<img src="css/images-gimme-code-2013-0038/image11.jpg">';
img[12] = '<img src="css/images-gimme-code-2013-0038/image12.jpg">';
img[13] = '<img src="css/images-gimme-code-2013-0038/image13.jpg">';
img[14] = '<img src="css/images-gimme-code-2013-0038/image14.jpg">';
// Array of images END
 
// Write the random variable
document.write('The random image is the number: ' + ran + '<br>');
// Write the image, the result must be: <img src="css/images-gimme-code-2013-0038/image3.jpg">
document.write(img[ran] + '<br>');
</script>
 
</body>
   
</html>
DEMO

 

Multiple image loader using Array:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>                                                                
<head>
  
</head>
   
<body>
 
RANDOM IMAGE LOADER<br>
Reload the page to change image<br>
 
<script language="JavaScript">
// Random variable from 0 to 10
// The souce images are image0.jpg ... image14.jpg
// Math.random() return a value between 0 and 1
// Math.floor() function returns the largest integer less than or equal to a number
var ran = Math.floor(11 * Math.random());
// Write 5 images, max value 10+4=14
var ran1 = ran+1;
var ran2 = ran+2;
var ran3 = ran+3;
var ran4 = ran+4;
 
// Array of images START
img = new Array()
img[0] = '<img src="css/images-gimme-code-2013-0038/image0.jpg">';
img[1] = '<img src="css/images-gimme-code-2013-0038/image1.jpg">';
img[2] = '<img src="css/images-gimme-code-2013-0038/image2.jpg">';
img[3] = '<img src="css/images-gimme-code-2013-0038/image3.jpg">';
img[4] = '<img src="css/images-gimme-code-2013-0038/image4.jpg">';
img[5] = '<img src="css/images-gimme-code-2013-0038/image5.jpg">';
img[6] = '<img src="css/images-gimme-code-2013-0038/image6.jpg">';
img[7] = '<img src="css/images-gimme-code-2013-0038/image7.jpg">';
img[8] = '<img src="css/images-gimme-code-2013-0038/image8.jpg">';
img[9] = '<img src="css/images-gimme-code-2013-0038/image9.jpg">';
img[10] = '<img src="css/images-gimme-code-2013-0038/image10.jpg">';
img[11] = '<img src="css/images-gimme-code-2013-0038/image11.jpg">';
img[12] = '<img src="css/images-gimme-code-2013-0038/image12.jpg">';
img[13] = '<img src="css/images-gimme-code-2013-0038/image13.jpg">';
img[14] = '<img src="css/images-gimme-code-2013-0038/image14.jpg">';
// Array of images END
 
// Write the random variable
document.write('The random image is the number: ' + ran + '<br>');
// Write the image, the result must be: <img src="css/images-gimme-code-2013-0038/image3.jpg">
document.write(img[ran] + '<br>');
document.write(img[ran1] + '<br>');
document.write(img[ran2] + '<br>');
document.write(img[ran3] + '<br>');
document.write(img[ran4] + '<br>');
</script>
 
</body>
   
</html>
DEMO

 

My official WebSite >