Как улучшить / исправить мою технику ниже, чтобы реализовать слайдер изображений

Question

У меня есть следующий список

<div id="imgrt">
<ul id="if">
  <li><img src="../pictures/album/20-c-44.jpg" /></li>
  <li><img src="../pictures/album/21-c-44.jpg" /></li>
  <li><img src="../pictures/album/u1-c-44.jpg" /></li>
</ul>
</div>

У меня есть кнопка, которую при нажатии можно анимировать, нажимая каждое изображение на левое поле.Что-то вроде того, что я сделал, было

function animateImages(iD, index) {
    var j = passedIndex;
    iD.children().each(function(index){

        if (passedIndex == index)
        jquery(this).animate(.........);
        return (index+1); 
    });
}
var nextIndex = 0;
jquery('#next').click(function() {
                            nextIndex = animateImages(jquery('#li',nextIndex);
                           });

Мой вопрос

1. , если вы заметили, что это плохая реализация (по крайней мере, я догадываюсь, пожалуйста, исправьте, если не так)я делаю вызов функции animateImages, который делает только запрос к элементу jquery (this) в списке и прерывание после анимации.Как я могу сделать это эффективно?

Заранее спасибо.

[Замечания о добавлении] - только что заметил последнюю часть jquery.each (), где они упоминались, чтобы выйти рано.В основном я хочу выйти рано в цикле, но рано после каждой итерации.Так что это будет похоже на возврат (что-то)

Пожалуйста, предложите несколько лучших способов для этого.Как уже упоминалось выше, когда я нажимаю кнопку, элемент управления переходит к функции animateImages, которая будет перемещаться по элементу в списке, анимировать изображение и возвращать индекс в списке.При следующем щелчке он перейдет в тот же список и проверит наличие индекса. Если индекс соответствует элементу списка, анимируйте его, верните новый индекс и т. Д.

Answer 1

Я немного изменил его, чтобы текущее изображение имело идентификатор:

<div id="imgrt">
<ul id="if">
  <li id="current"><img src="../pictures/album/20-c-44.jpg" /></li>
  <li><img src="../pictures/album/21-c-44.jpg" /></li>
  <li><img src="../pictures/album/u1-c-44.jpg" /></li>
</ul>
</div>
<a href="#" id="next">Next</a>

Таким образом ваш javascript может выглядеть так:

$('#next').click(function(e){
    e.preventDefault();
    e.stopPropagation();

    var $current = $('#current');
    $('#current').next().attr('id','temp-curr');
    // animation code
    $current.removeAttr('id');
    $('#temp-curr').attr('id','current');
});

Причина, по которой я сделал это таким образом, заключается в том, что только ОДИН элемент имеет когда-либо идентификатор #current. Таким образом, если к нему подключится любой другой ваш код, он не будет сбит с толку, если он когда-либо будет работать, когда есть два элементы с именем current.

Я бы добавил ваш анимационный код и привязал его к скольжению всего элемента ul. вместо того, чтобы каждый раз просматривать весь список. Просто установите ширину в #imgrt и установите переполнение скрытым.