jQuery旋转木马。如何仅显示下一个或上一个元素 [英] jQuery Carousel. How to show the Next or Previous Element only

问题描述

我有一个jQuery问题，并且我真的尝试了我所知道的一切（我在这方面很新手）所以..

I have a jQuery problem, and I've really tried everything I know (i am so newbie at this) so ..

这个问题简而言之就是I我正在做一个简单的旋转木马般的效果。我使用这段代码。

The problem in short is I am doing a simple carousel-like effect. I am using this code.

（div .showarea是需要旋转的div（next / prev），但我只想保留一个div时间。）

(The div .showarea is the DIV which needs to be rotated (next/prev) but I want to keep only one div shown at a time.)

这是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>

< a href =＃carouselPrevclass =leftarrowtitle =Previous>< / a>
< a href =＃carouselNextclass =rightarrowtitle =Next>< / a>
< / div>

This is my jquery attempt

这是我的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); } });

Unfortunately, next() and prev() won't display the next element only, but all next elements and same thing for prev(). Any quick workaround.. 

不幸的是，next（）和prev（）只会显示下一个元素，元素和prev（）相同的东西。任何快速解决方法..

Can someone help me on this,

有人可以帮我解决这个问题，

谢谢

Thanks

推荐答案

下面的代码将会旋转，所以如果你在第一个项目后按回来，然后显示最后一项...

The below will rotate so if you are at the first item pressing back will then show the last item...

演示此处

$('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);

});

这篇关于jQuery旋转木马。如何仅显示下一个或上一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！