Циклический просмотр изображений с использованием JQuery

Question

Я пытаюсь использовать JQuery next () для добавления CSS к одному изображению за раз, выделяя его. Когда пользователь нажимает кнопку, он должен выделить изображение next () с рамкой. Вместо этого он выделяет все изображения после него.

$('#imageList img').next().addClass('selected');

Добавляет класс ко ВСЕМ изображениям.

Answer 1

это тоже даст вам то, что вы хотите http://jsfiddle.net/GWtg8/2/

$(document).ready(function(){
$('#btn').click(function(){
    $('#cont img').not('.selected').first().addClass('selected');
});    });

Answer 2

Сначала выберите первое изображение:

var img = $('#imageList img:first').addClass('selected');

Теперь, когда вы хотите выделить следующее изображение, вызовите эту функцию:

function selectNext() {
    img.removeClass('selected').next().addClass('selected');
}

Answer 3

Попробуйте это

$(function(){
    var imageList = $('#imageList img'), imgCounter = 0;
    $("buttonSelector").click(function(){
       imageList.eq(imgCounter++).addClass('selected');
    }); 
});

Answer 4

Похоже, что следующее должно работать очень хорошо для вас, следует добавить «выбранный» класс к первому изображению в наборе, не содержащем этот класс:

$('#imageList img:not(.selected)').eq(0).addClass('selected');