цикл jQuery prev next - PullRequest
Новая
       29

цикл jQuery prev next

2 голосов
/ 03 июля 2011

Я нашел этот бит кода вист, ищущий базовый слайдер и его достаточно близко, делает то, что я хочу, но я хотел бы, чтобы он зациклился, как только добрался до последнего 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>

Ответы [ 2 ]

5 голосов
/ 03 июля 2011

Ваш код может быть значительно упрощен следующим образом: 

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/

РЕДАКТИРОВАТЬ: Я забыл обновить ответ с ревизией, которая находится в скрипке.Исправлено.

3 голосов
/ 03 июля 2011

Измените это на: 

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