Javascript – Random Image Rotator
Single image loader, the simplest way:
<!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:
<!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:
<!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
