Untitled

<!DOCTYPE html>
<head>
</head>
<body>
<div id="slideshow">
<img id="pic" width="100%" height="auto"
alt="Icon" src="one.jpg">
</div>

<script>
var i, imgs, pic;

function rotate()
{
pic.src=imgs[i];

(i===(imgs.length-1))?(i=0):(i++);
setTimeout(rotate, 1000);
}


function init()
{
pic=document.getElementById("pic");

imgs=["one.jpg", "two.jpg", "three.jpg", "four.jpg"];

var preload=new Array();
for (i=0; i<imgs.length; i++)
{
preload[i]=new Image();
preload[i].src=imgs[i];
}

i=0;
rotate();
}

document.addEventListener("DOMContentLoaded",init, false);

</script>
</body>

</html>