Die jQuery-Diashow-Schleife schlägt fehl

Ich habe versucht, snook.cas einfachste jQuery-Diashow zu implementieren, aber auf untergeordnete Elemente in einem angewendet<ul> anstelle eines einfachen Stapel von Bildern. Ich habe die Diashow erfolgreich durch die erforderlichen untergeordneten Elemente gedreht, aber mir fehlt das Know-how, wenn ich die Sequenz beende und zum Anfang zurückkehre.

Ich möchte, dass die Sequenz zum ersten zurückkehrt<p> untergeordnetes Element und fahren Sie in einer Endlosschleife fort.

Sie können eine Demo der Diashow in Betrieb sehenJS Bin. Entschuldigung für die Ausführlichkeit des jQuery-Codes; Ich bin sicher, es könnte optimiert werden.

Für die Nachwelt ist hier das HTML:

<header>
    <nav>
      <ul>
        <li class="current">
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
        <li>
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
        <li>
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
        <li>
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
      </ul>
    </nav>
  </header>

Und hier ist die jQuery:

$('header nav li').not('.current').children('p').hide();
   setInterval(function(){
     $('header nav li.current').children('p').hide()
     .parent('li').removeClass()
     .next('li').addClass('current')
     .children('p').show()
     .end();
   },3000);

Jede Hilfe, die Sie geben könnten, wäre sehr dankbar. Prost.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage