4

私は snook.ca の Simplest jQuery Slideshow を実装しようとしましたが<ul>、画像の単純なスタックではなく、内部の子要素に適用すると。必要な子要素を巡ってスライドショーを回転させることはできましたが、シーケンスを終了して最初に戻るときのノウハウが不足しています。

シーケンスが最初の子要素に戻り<p>、無限ループに続くようにしたいと思います。

JS Binで動作中のスライドショーのデモを見ることができます。jQuery コードが冗長であることをお詫びします。きっと最適化できると思います。

後世のためにここに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>

そして、ここに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);

あなたが与えることができるどんな助けも大歓迎です。乾杯。

4

1 に答える 1

3

次のli. 次がない場合li、length結果セットの は になります0。その場合は、最初にループバックします。その後、セットアップを完了してください。これが動作していることを示すJSBinコードのリビジョンです：

$('header nav li').not('.current').children('p').hide();
setInterval(function(){
  var $next = $('header nav li.current').children('p').hide()
  .parent('li').removeClass()
  .next('li');

  if(!$next.length) $next = $('header nav li:first');

  $next.addClass('current')
  .children('p').show();
},3000);
于 2010-02-19T03:45:16.937 に答える