Question

我找到this bit of code whist搜索一个基本的滑块，它足够接近我想要的但是我希望它一旦到达最后一个li就循环，即如果最后一个li和下一个按钮被点击循环到1，继续，

所有的帮助都表示赞赏，并且一如既往地感谢。

$('.udtalelse').addClass("passiv");
ctrlKunder(0);

$('#prev').click(function() {
    var index = getActive();
    if (index == 0) return;
    index--;
    ctrlKunder(index);
})
$('#next').click(function() {
    var index = getActive();
    if (index == $('.udtalelse').length - 1) return;
    index++;
    ctrlKunder(index);
})

function ctrlKunder(ele) {
    $('.udtalelse').removeClass("active").addClass("passiv");
    $('.udtalelse').eq(ele).removeClass("passiv").addClass("active");
}

function getActive() {
    var index;
    $('.udtalelse').each(function(i) {
        if ($(this).hasClass("active")) index = i;
    })
    return index;
}

<ul class="kunder">
    <li><span class="udtalelse">Indhold 1</span></li>
    <li><span class="udtalelse">Indhold 2</span></li>
    <li><span class="udtalelse">Indhold 3</span></li>
</ul>
<span class="kunderpagination">
    <a href="#" id="prev">« Previous</a> |
    <a href="#" id="next">Next »</a>
</span>

Answer 1

您的代码可以大大简化：

var all = $('.udtalelse').addClass("passiv");

var i = -1;

$('#prev').click(function() {
    ctrlKunder( i = !i ? all.length - 1 : --i );
});
$('#next').click(function() {
    ctrlKunder( i = ++i % all.length );
}).click();

function ctrlKunder(ele) {
    all.removeClass("active").addClass("passiv");
    all.eq(ele).removeClass("passiv").addClass("active");
}

同样更高效，因为.udtalelse元素已缓存。

示例： http://jsfiddle.net/3z9uc/

编辑：我忘了用小提琴中的修订更新答案。固定的。

Answer 2

将其更改为：

        $('#next').click(function(){
            var index = getActive();
            if(index == $('.udtalelse').length - 1) { 
                index = 0; 
            } else { 
                index++;
            }
            ctrlKunder(index);

如果你想在之前的相同包装：

        $('#prev').click(function(){
            var index = getActive();
            if(index == 0) {
                $index = $('.udtalelse').length - 1;
            } else {
                index--;
            }
            ctrlKunder(index);
        })

jQuery循环prev next

2 个答案: