jQueryカルーセル。次の要素または前の要素のみを表示する方法

Question

jQueryの問題があります。私は実際に知っているすべてを試しました（私はこれで初心者です）。

短い問題は私がやっていることです簡単なカルーセルのような効果。私はこのコードを使用しています。

（のdiv .showareaが回転する必要がDIV（次/前）ですが、私は一度に1つだけを図示のdivを維持したい。）

これは、HTMLマークアップです。

<div class="maincarousel"> 
     <div class="showarea"><a href="#"><img src="img/sampleshow.png" alt="" title="" /></a></div> 
     <div class="showarea"><a href="#"><img src="img/sampleshow2.png" alt="" title="" /></a></div> 
     <div class="showarea"><a href="#"><img src="img/sampleshow3.png" alt="" title="" /></a></div> 
     <a href="#carouselPrev" class="leftarrow" title="Previous"></a> 
     <a href="#carouselNext" class="rightarrow" title="Next"></a> 
    </div> 

これは私のjqueryの唯一の次の要素を表示しません

$('.showarea').hide(); 
$('.showarea:first').fadeIn(500); 

$('.maincarousel a').click(function() { 

    if ($(this).attr('href') == '#carouselNext') { 
     $('.showarea').hide(); 
     $('.showarea').next('.showarea').fadeIn(500); 
    } 

    if ($(this).attr('href') == '#carouselPrev') { 
     $('.showarea').hide(); 
     $('.showarea').prev('.showarea').fadeIn(500); 
    } 

}); 

残念ながら、次の（）とPREVの試み（）が、前のため、すべての次の要素と同じものです（）。任意の迅速な回避策..

誰かがこの上で私を助けることができ、

おかげ

Answer 1

あなたが最後の項目が表示されます背中を押して最初の項目である場合は、以下のように回転します...

デモhere

$('div.showarea').fadeOut(0); 
$('div.showarea:first').fadeIn(500); 

$('a.leftarrow, a.rightarrow').click(function (ev) { 
    //prevent browser jumping to top 
    ev.preventDefault(); 

    //get current visible item 
    var $visibleItem = $('div.showarea:visible'); 

    //get total item count 
    var total = $('div.showarea').length; 

    //get index of current visible item 
    var index = $visibleItem.prevAll().length; 

    //if we click next increment current index, else decrease index 
    $(this).attr('href') === '#carouselNext' ? index++ : index--; 

    //if we are now past the beginning or end show the last or first item 
    if (index === -1){ 
     index = total-1; 
    } 
    if (index === total){ 
     index = 0 
    } 

    //hide current show item 
    $visibleItem.hide(); 

    //fade in the relevant item 
    $('div.showarea:eq(' + index + ')').fadeIn(500); 

}); 

Answer 2

あなたは.prevによってあなたに与えられたコレクション（）と.nextの最初の要素を選択するために、.eq(0)を使用して試みることができます（ ）。

ほとんどのjQueryメソッドと同様に、.next()と.prev()はコレクションで動作していることに注意してください。したがって、セレクタ'.showarea'が複数の要素を選択している場合、.next()は'.showarea'で選択された各要素の次の兄弟要素を選択し、同様に.prev()で選択します。

---

if ($(this).attr('href') == '#carouselNext') { 
    $('.showarea').hide(); 
    var el = $('.showarea').next('.showarea').eq(0); 
    if (el.length) { 
     el.fadeIn(500); 
    } 

} 

if ($(this).attr('href') == '#carouselPrev') { 
    $('.showarea').hide(); 
    var el = $('.showarea').prev('.showarea').eq(0); 
    if (el.length) { 
     el.fadeIn(500); 
    } 
}