jQueryЗамена изображений через промежутки времени

Question

Я пытаюсь добавить рождественские огни в мой логотип.Я собирался сделать это во флэш-памяти, но я пытаюсь отойти от флэш-памяти, поэтому я решил попробовать это с jQuery.

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

$active.fadeOut(function() $next.fadeIn().addClass('active');

на $ active.show (function () $ next.show (). AddClass ('active');

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

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

    function swapImages(){
  var $active = $('#myGallery .active');
  var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
  $active.show(function(){
  $active.removeClass('active');
  $next.show().addClass('active');
  });
}
  $(document).ready(function(){
      setInterval('swapImages()', 1000);
})

HTML:

  <div id="myGallery">
      <img src="br_xmas_1.png" class="active" />
      <img src="br_xmas_2.png" />
      <img src="br_xmas_3.png" />
     <img src="br_xmas_4.png" />
</div>

См. частично рабочий полный код здесь или нетрабочая jsfiddle

Answer 1

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

function swapImages() {
    var $current = $('#myGallery img:visible');
    var $next = $current.next();
    if($next.length === 0) {
        $next = $('#myGallery img:first');
    }
    $current.hide();
    $next.show();
}

$(document).ready(function() {
    // Run our swapImages() function every 0.5 secs
    setInterval(swapImages, 500);
});

Рабочий пример

Бонус ( Случайное изменение )

function swapImages() {
    var random = Math.floor(Math.random()*3),
        $current = $('#myGallery img:visible');
    $current.hide();
    if($current.index() == random) {
        random = ++random % 4;
    }
    $('#myGallery img').eq(random).show();
}

$(document).ready(function() {
    // Run our swapImages() function every 0.5 secs
    setInterval(swapImages, 500);
});

Answer 2

Ах, уже ответили.

Попробуйте это один

Вы использовали функцию show (), которая добавляет стиль display: block к элементу. Итак, после одного запуска все изображения отображались одновременно, а последнее было поверх остальных, так что одно отображалось.