Cycling between 3 images (mobile Safari)
<p>I have the following javascript.  It works well when I am cycling between 2 images, but when I add a third it does not work correctly.</p>

<p>Here is my CSS:</p>

<pre><code>img {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    position: absolute;
    width: 320px;
    height: auto;
}

img.fade-out {
    opacity: 0;
}

img.fade-in {
    opacity: 1;
}
</code></pre>

<p>Here is my javascript, which seems to work but seems laggy and definately not an elegant solution.</p>

<pre><code>&lt;/head&gt;&lt;body style="color: black"&gt;
&lt;img id="one" class="fade-out" src="Wallpaper.png"/&gt;
&lt;img id="two" class="fade-out" src="Wallpaper0.png"/&gt;
&lt;img id="three" class="fade-out" src="Wallpaper1.png"/&gt;

    &lt;script&gt;
        var images = ['Wallpaper.png', 'Wallpaper0.png', 'Wallpaper1.png'];
        var index = 0;

        var fade_in = one;
        var fade_out = two;
        var fade_foo = three;

        fade_in.src = images[0];
        fade_out.src = images[images.length - 1];

        var fade = function () {
            fade_in.src = images[index];
            index = (index + 1) % images.length;

            fade_in.className = 'fade-out';
            fade_out.className = 'fade-in';
            fade_foo.className = 'fade-out';

            var fade_tmp = fade_in;
            fade_in = fade_out;
            fade_out = fade_foo;
            fade_foo = fade_tmp;

            setTimeout(fade, 15000);
        };

        fade();
&lt;/body&gt;&lt;/html&gt;
</code></pre>
