Create a div for the image inside a main div as mentioned below :
<div style="height: 500%">
<div id="imageDiv" class="imageContainer"></div>
Spider Code
</div>
Set the CSS 'imageContainer' :
.imageContainer {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
z-index: -1;
background-repeat: no-repeat;
}
Now add couple of images in your solution folder and create array for that. In my case name of images are 1.png, 2.png etc...
and create a script as mentioned below :
<script type="text/javascript" language="javascript">
var myImages = new Array("1.png", "2.png", "3.png", "4.png", "5.png");
$(document).ready(function() {
var random = myImages[Math.floor(Math.random() * myImages.length)];
random = 'url(images/' + random + ')';
$('#imageDiv').css('background-image', random);
setInterval(function() {
SetImage();
}, 5000);
});
function SetImage() {
var random = myImages[Math.floor(Math.random() * myImages.length)];
random = 'url(images/' + random + ')';
$('#imageDiv').fadeOut(2000);
setTimeout(function () {
$('#imageDiv').css('background-image', random);
$('#imageDiv').fadeIn(2000);
}, 2000);
}
</script>