Display random image on page loads with javascript

 

To display random images with jabascript, first set images in your specific div id. 

<div id="imgselection">
 <img title="test" alt="test" src="http://www.yoursite.com/image1.jpg">
 <img title="test" alt="test" src="http://www.yoursite.com/image2.jpg">
 <img title="test" alt="test" src="http://www.yoursite.com/image3.jpg">
 <img title="test" alt="test" src="http://www.yoursite.com/image4.jpg">
 <img title="test" alt="test" src="http://www.yoursite.com/image5.jpg">
</div>

Now add below javascript code to display random images in javascript.

<script type="text/javascript">

    var images = document.getElementById('imgselection').getElementsByTagName('img');

    var imgArray = [];

    for(var i = 0; i < images.length; i++) {

        imgArray.push(images[i].src);

    }

    var size = imgArray.length;

    var x = Math.floor(size*Math.random());

    document.getElementById('rotate-image').style.backgroundImage = "url(\""+imgArray[x]+"\")";

</script>