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

用JQuery替换img

1 个答案: