title: cycling images with jquery
body: <p>I have a simple HTML list:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;div class="slideshow1"&gt;
              &lt;img class="bradius5 slide1" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
              &lt;img class="bradius5 slide1" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
              &lt;img class="bradius5 slide1" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
              &lt;img class="bradius5 slide1" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;div class="slideshow2"&gt;
              &lt;img class="bradius5 slide2" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
              &lt;img class="bradius5 slide2" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
              &lt;img class="bradius5 slide2" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
              &lt;img class="bradius5 slide2" src="&lt;?php base_url();?&gt; img/ristorante1.jpg" height="150" width="170"/&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried to cycle through the images by doing this:</p>
  
  <pre><code>$('.slide1,.slide2').hide();
  
  $.each($('.slide1'), function() {
      $(this).fadeIn().delay(1900).fadeOut();
  });
  
  $.each($('.slide2'),function() {
      $(this).fadeIn().delay(1900).fadeOut();
  });
  </code></pre>
  
  <p>However, it doesn't cycle image by image; it cycles multiple images at a time.</p>
  
  <p>I want to cycle through all the images in the first <code>li</code>, then cycle through the images in the second <code>li</code>.</p>