javascript – jQuery Carousel.如何仅显示下一个或上一个元素

我有一个jQuery问题,我真的尝试了我所知道的一切(我是新手)所以..

简而言之,我正在做一个简单的旋转木马效果.我正在使用此代码.

(div .showarea是需要旋转的DIV(下一个/上一个),但我想一次只显示一个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);
    }

});

不幸的是,next()和prev()不会仅显示下一个元素,而是显示prev()的所有下一个元素和相同的元素.任何快速解决方法..

有人可以帮我这个,

谢谢

$('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 @R_603_10586@l item count
    var @R_603_10586@l =  $('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 = @R_603_10586@l-1;
    }
    if (index === @R_603_10586@l){
       index = 0
    }

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

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

});