замена img на JQuery

Question

Я новичок в Jquery и даже в Javascript. Нашел и реализовал этот скрипт, который своевременно заменяет изображения. Скрипт работает хорошо, когда я оборачиваю изображения в тег. Я хочу, чтобы изображения были ссылками. Как только я оборачиваю теги в тег, подоконник скрипта обновляется каждые столько секунд, но не загружает следующее изображение

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

<script type='text/javascript'>
    function swapImages(){
      var $active = $('#rooster .active');
      var $next = ($('#rooster .active').next().length > 0) ? $('#rooster .active').next() : $('#rooster img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }

    $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 5000);
    }); </script>

Answer 1

Проблема здесь:

$('#rooster img:first')

Он пытается найти первый <img> и затемнить его, но, поскольку он заключен в тег, он не принесет много пользы, вам нужноизмените там тип тега, например:

$('#rooster a:first')

В целом, есть еще некоторые изменения, например, вам никогда не следует передавать строку в setInterval(), если вы можете избежать этого, вместо этого просто передайте имя функции,например:

setInterval(swapImages, 5000);

Как только вы это сделаете, вам не нужно оставлять функцию глобальной, вы можете привести ее в порядок в document.ready, в общем, вы можете сделать что-то вроде этого:

$(function(){
  function swapImages(){
    var $active = $('#rooster .active');
    var $next = $active.next().length > 0 ? $active.next() : $('#rooster a:first');
    $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
    });
  }
  setInterval(swapImages, 5000);
});