Simple Slideshow

Created as answer to StackOverflow question http://stackoverflow.com/questions/13673816/javascript-slideshow-image-skips-on-first-playthrough/13696853#13696853

by FredGandt

HTML

<div id="screen">
    <div>
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/10.jpg" alt="pic1">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/9.jpg" alt="pic2">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/8.jpg" alt="pic3">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/7.jpg" alt="pic4">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/6.jpg" alt="pic5">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/5.jpg" alt="pic6">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/4.jpg" alt="pic7">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/3.jpg" alt="pic8">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/2.jpg" alt="pic9">
        <img class="pic" src="http://i55.photobucket.com/albums/g122/Cleeve123/1.jpg" alt="pic10">
        </div>
</div>

CSS

html, body { 
    background-color: #3b3b35;
}
#screen {
    position: relative;
    width: 1024px;
    height: 768px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
#screen div {
    position: absolute;
    width: 10240;
    height: auto;
    margin: 0px;
    padding: 0px;
}
#screen div img.pic {
    position: relative;
    float: left;
    width: 1024px;
    height: auto;
    margin: 0px;
}

JavaScript

(function () {
    function startSlideshow(screen) {
        var imagewidth = 1024, // width of images in pixels
            transitioneveryseconds = 5, // seconds each slide is still
            transitionseconds = 0.5, // transition time in seconds
            framerate = 60, // transition frames per second
            slidequantity = screen.getElementsByTagName("img").length,
            left = 0,
            slide = 0;
            screen.style.width = (slidequantity * imagewidth) + "px";
        transitionseconds *= 1000;
        transitioneveryseconds *= 1000;
        setInterval(function () {
            left = 0;
            slide = 0;
            while (slide++ < framerate) {
                setTimeout(function () {
                    screen.style.left = (left -= (imagewidth / framerate)) + "px";
                }, slide * (transitionseconds / framerate));
            }
            setTimeout(function () {
                screen.appendChild(screen.getElementsByTagName("img")[0]);
                screen.style.left = "0px";
            }, transitionseconds);
        }, transitioneveryseconds + transitionseconds);
    }
    self.onload = function () {
        startSlideshow(document.getElementById("screen").getElementsByTagName("div")[0]);
    }
}());