jquery - 我如何通过单击导航箭头从右到左（或其他）制作“滑块”

Question

我是 jQuery 的新手。单击时我需要#reviews divs（#rev1，，#rev2）#rev3“滑动” #arrowr。此代码有效，但单击#Arrowr@#Rev3后不会更改为#rev1. 你能指点我解决这个问题的方法吗？单击时如何使div一一更改#arrowr？并创建循环？请！对不起我糟糕的英语。

<div id="reviewsc">
    <div id="reviews">
        <div id="rev1" class="revv">rev1</div>
        <div id="rev2" class="rev">rev2</div>
        <div id="rev3" class="rev">rev3</div>
    </div>
    <div id="arrowr">></div>
</div>
<style>
    .rev {
        margin-left: -9999px or opacity:0 or display:none;
    }
    ;
    .revv {
        margin-left: 0px or opacity:1 or display:block;
    }
    ;
</style>

$('div#arrowr').click(function () {
    $('#rev1').removeClass('revv').addClass('rev').next().removeClass('rev').addClass('revv');
    if ($('#rev2').hasClass('revv')) {
        $('div#arrowr').click(function () {
            $('#rev2').removeClass('revv').addClass('rev').next().removeClass('rev').addClass('revv');
        });
    }
    if ($('#rev3').hasClass('revv')) {
        $('div#arrowr').click(function () {
            $('#rev3').removeClass('revv').addClass('rev');
            $(this) // How i can go Back to my #REV1 Div? And start the cycle again
        });
    }
    return false;
});

Answer 1

因为其他默认情况下是隐藏的：

var ctr = 1;
var max = $('#reviews').children().length;

$('div#arrowr').click(function () {
    $('#rev'+ctr).removeClass('revv').addClass('rev');
    ctr++;
    if(ctr > max){ //ctr = max+1 => reset ctr
        ctr = 1;
    }    
     $('#rev'+ctr).removeClass('rev').addClass('revv');
});

对于另一个方向：

$('div#arrowl').click(function () {
    $('#rev'+ctr).removeClass('revv').addClass('rev');
    ctr--;
    if(ctr == 0){ //ctr = 0 => reset ctr
        ctr = max;
    }    
     $('#rev'+ctr).removeClass('rev').addClass('revv');
});

这是一个小提琴：http: //jsfiddle.net/phgXu/2/