In this short article I’ll explain how to build a simple auto image rotator using timed image swap technique in which we rotate the image at specific time intervals.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" language="javascript">
        window.onload = function () {
            var rotator = document.getElementById("rotator");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 1000);
        };
    </script>
</head>
<body>
    <form id="form1">
    <div id="rotator">
        <img alt="" src="//www.aspsnippets.com/images/Blue/Logo.png" />
        <img alt="" src="http://jqueryfaqs.com/images/Blue/Logo.png" />
        <img alt="" src="http://www.aspforums.net/images/blue/Logo.png" />
    </div>
    </form>
</body>
</html>
 
Explanation
In the above code snippet, I have placed 3 images inside an HTML DIV rotator. Inside the window onload event handler I first hide all the images inside the HTML DIV and then using JavaScript setInterval function I rotate image at an interval of 1 second.
 
Demo