Infinite loop for 4 images with jQuery
<p>I have the next code:</p>

<pre><code>$(document).ready(function () {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
});
</code></pre>

<p>It's more a playground with jQuery. Well, first I wanted the first image to fade in, then the second one and then the final one. After this I wanted all the images to fade out after they have been loaded.</p>

<p>But I am thinking about two new issues:</p>

<ol>
<li><p>create an infinite loop</p></li>
<li><p>use more than 3 images, but at once show only 3 (I realise this could affect the id's to be changed into something else)</p></li>
</ol>

<p>Any ideas?</p>

<p>I will not post here how I tried to realise the loop, only one funny method:</p>

<pre><code>$(document).ready(function () {
    function runPics() {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
    } interval = setInterval(runPics, 3500);
});
</code></pre>

<p>This code sucks, right? :P</p>
