javascript - 用 JQuery 替换 img

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);
});