JQuery fadeIn fadeOut с setInterval, работающим время от времени

Question

У меня есть куча изображений, которые нужно поворачивать и выводить по одному каждые 2 секунды с помощью модных JQuery fadeIn и fadeOut. У меня есть все изображения в HTML, чтобы предварительно загрузить их, и таймер setInterval, который затемняет текущее изображение, а затем добавляет следующее. JS прерывается, и текущее изображение никогда не исчезает, а следующее исчезает, давая вам два изображения.

У меня такое ощущение, что это как-то связано с тем, что setInterval не работает должным образом каждые 2 секунды, но есть ли лучшие способы для достижения того, что мне нужно?

Вот фрагмент кода:

HTML

<a href="javascript:;">
  <img id="img1" src="image1.gif" />
  <img id="img2" src="image2.gif" style="display:none;" />
  <img id="img3" src="image3.gif" style="display:none;" />
</a>

JS

var numImages = 3;
var currentImage = 1;
imageInterval = window.setInterval("changeImage();", 2000);

function changeImage()
{
    $("#img" + currentImage).fadeOut("slow", function() {
        if (currentImage >= numImages)
        {
            currentImage = 0;
        }
        $("#img" + (currentImage + 1) ).fadeIn("slow", function() {
            currentImage++;
        });
    });
}

Answer 1

Задумывались ли вы об использовании Cycle Plugin ? Похоже, это именно то, что вы пытаетесь сделать, и это предлагает большую гибкость. Я использовал этот плагин с отличными результатами. Настоятельно рекомендуется.

Answer 2

Просто не в моей голове ... почему вы ведете бухгалтерский учет currentImage в функциях обратного вызова? Мне кажется, это проще, и может даже иметь какое-то отношение к вашей проблеме:

function changeImage()
{
    $("#img" + currentImage).fadeOut("slow");
    currentImage = (currentImage >= numImages) ? 1 : currentImage + 1;
    $("#img" + currentImage).fadeIn("slow");
}

Answer 3

также

setInterval (function () {
    $("img:eq(0)").fadeOut ("slow").next ("img").fadeIn ("slow");
}, 2000);

Answer 4

Ваша проблема в том, что если вы нажмете на img2 до того, как оно закончится, то currentImage все еще думает, что вы смотрите за переходом между img1 и img2, но в действительности img2 теперь активен, и вы ждете на img3. 1001 *

Я думаю, что решение Джима должно увидеть вас в порядке.

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

numImages = $("a > img").size();

Answer 5

У вас есть id = "img2" дважды.

Не можете ли вы упростить - сначала рассчитайте текущий и следующий идентификатор. Затем выполните $ (). FadeOut () и на следующей строке $ (). FadeIn (), чтобы избежать всей сложности функции.

Answer 6

У меня похожая проблема с использованием функции, основанной на простейшем слайд-шоу jquery snook.ca . (см. мой комментарий @tom) Хотя мое происходит независимо от того, нажимаю я или прокручиваю или нет!

Кажется, что после первого прохода в цикле все запутано и начинает наполовину затухать или исчезать и просто прыгать без затухания! Я наблюдал за html-панелью в firebug и обнаружил, что атрибут отображения css не был установлен из 'block' обратно в 'none' должным образом, в результате чего все изображения, на которых установлено display:block, независимо от их предполагаемого исчезновения состояние.

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

Но, увидев поведение css, я теперь задаюсь вопросом, не является ли это основной проблемой в способе, которым jQuery реализует функции 'fadeIn' и 'fadeOut' ?? !!