<body>
<style>
*{margin:0;padding:0;}
html{max-width: 100%; height:100%;}
#main-image{height:100%;width:100%;position:absolute;top :0;left:0;}
.main-img-1{background: url(images/bg1.png) 0 0 no-repeat; -webkit-background-size: cover;
background-size: cover;}
.main-img-2{background: url(images/bg2.png) 0 0 no-repeat; -webkit-background-size: cover;
background-size: cover;}
.main-img-3{background: url(images/bg3.png) 0 0 no-repeat; -webkit-background-size: cover;
background-size: cover;}
.main-img-4{background: url(images/bg4.png) 0 0 no-repeat; -webkit-background-size: cover;
background-size: cover;}
</style>
<section>
<div id="main-image" class="main-img">
</div>
<!-- /.main-image -->
</section>
<script>
function randomInteger (min, max){
var rand = min - 0.5 + Math.random() * (max - min +1)
rand = Math.round(rand);
return rand;
}
setInterval(function(){
var randomMainImg = randomInteger(1,4);
$('#main-image').removeClass().addClass("main-img-" + randomMainImg);
},100);
</script>