addClass .next（）.prev（）スライドショーは動作しません

Question

私はjqueryで小さなスライドショーを作りたいと思います。 最初の問題：「次のクリック機能」しかない場合は、画像が順番に正しく表示されます。しかし、私が "prev"関数を使用すると、次のボタンはもう使えません。 もう1つの問題：スライドショーは、最後の画像の後ろにある「次のボタン」をクリックして最初の画像から再び開始されます。おそらく誰かが考えを持っているかもしれません。前もって感謝します。

  $("#next").click(function(){ 
      if($("#gallery li").next("#gallery li").length != 0) { 
       var next = $(".toppicture").parent("li").next().children("img"); 
       $("#gallery li").children("img").removeClass('toppicture'); 
       $(next).addClass('toppicture'); 
      } 
      else { 
       $(this).children("img").removeClass('toppicture'); 
       $("#gallery li:first-child").children("img").addClass('toppicture'); 
      } 
     }); 

     $("#prev").click(function(){ 
      if($("#gallery li").prev("#gallery li").length != 0) { 
       var prev = $(".toppicture").parent("li").prev().children("img"); 
       $("#gallery li").children("img").removeClass('toppicture'); 
       $(prev).addClass('toppicture'); 
      } 
      else { 
       $(this).children("img").removeClass('toppicture'); 
       $("#gallery li:first-child").children("img").addClass('toppicture'); 
      } 
     }); 

idを持つ「UL」「ギャラリー」のようになります。

<li> 
<img class="toppicture" src="images/w1.jpg" title="Title #0"/> 
    </li> 
    <li> 
<img src="images/w2.jpg" title="Title #1"/> 
    </li> 
    <li> 
<img src="images/w3.jpg" title="Title #2"/> 
    </li> 

Answer 1

これは、最も簡単なスライダーではありませんが、私はそれを理解するのが最も簡単だと思います。 jsFiddle

HTML：

<ul id="gallery"> 
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li> 
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li> 
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li> 
</ul> 
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a> 

JS：

function loadSlide(index){ 
    $('#gallery li').hide() 
     .eq(index).show(); 
} 

$('#gallery').data('index',0).find('li').hide(); 
loadSlide(0); 

$('#next').on('click',function(e){ 
    var index = $('#gallery').data('index'), 
    numSlides = $('#gallery li').length; 

    index = (index + 1) % numSlides;  
    loadSlide(index); 
    $('#gallery').data('index',index); 
    e.preventDefault();    
}); 
$('#previous').on('click',function(e){ 
    var index = $('#gallery').data('index'), 
    numSlides = $('#gallery li').length; 

    index = (index + numSlides - 1) % numSlides; 
    loadSlide(index); 
    $('#gallery').data('index',index); 
    e.preventDefault(); 
}); 

それは役割を分離することによって（あなたの.next()大失敗など）トラバーサルの多くを回避できます。

• スライドの切り替えは関数で行い、番号をとり、そのスライドを表示します。

• 現在のスライド番号は次及び前ボタンはわずか数は適宜、次いでスライドチェンジャを呼び出し、現在のスライドとデクリメントのいずれかの増分を取得する必要が.data()

• 使用ギャラリー自体に格納されています。

この方法で、特定の領域を簡単に拡張できます。移行したいですか？それをスライドチェンジャーに入れてください。スライドを自動進めるようにしますか？スライドチェンジャーを呼び出すタイマーを設定します。

このソリューションとフル機能のスライダーを区別する唯一のことは、すべてをまとめてカプセル化し、スライドを変更する機能ではなくカスタムイベントを使用することです。この例を少し拡張して、あなたが望むなら違いを見せてくれることを嬉しく思います。あなた

にここexample in jsFiddle

Answer 2

だから、あなたが望むものを、カルーセルのようなものです。このような効果を扱うjQueryプラグインがいくつかあります：jCarouselSorgalla.com