A div with an id of 'slideshow' contains five images, the first of which is shown and the others are hidden using a display style of none. Using Javascript, create a simple slideshow that cycles through the images, displaying each image for three seconds at a time, looping back to the first image when the end is reached. You cannot use jQuery or…

challenge.html

<div id="slideshow">
    <img id="container" src="http://placekitten.com/400" alt="kitten" />
    <img id="container" src="http://placekitten.com/250" style="display:none;" alt="kitten" />
    <img id="container" src="http://placekitten.com/300" style="display:none;" alt="kitten" />
    <img id="container" src="http://placekitten.com/200" style="display:none;" alt="kitten" />
    <img id="container" src="http://placekitten.com/500" style="display:none;" alt="kitten" />
</div>

<script src="solution.js"></script>

solution.js

// Solution here
window.onload = function start() {
    slide();
}
function slide() {
    var num = 0, style = document.getElementById('container').style;
    window.setInterval(function () {
        // increase by num 1, reset to 0 at 4
        num = (num + 1) % 4;

        // -600 * 1 = -600, -600 * 2 = -1200, etc 
        style.display = 'block'; 
    }, 3000); // repeat forever, polling every 3 seconds
}