javascript - 简单的 JQuery 定时图像旋转

Question

出于某种原因，以下内容无效。这很可能是我没有 sleep 的结果，解决方案可能非常简单......

JS:

<script src="http://code.jquery.com/jquery-1.6.1.js"> </script>
    <script>
        function swapImages(){
          var $active = $('#switch .active');
          var $next = ($('#switch .active').next().length > 0) ? $('#switch .active').next() : $('#switch 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>

HTML:

<div id="switch"><img src="images/chalk.jpg" class="active" /><img src="images/students.jpg" /></div>

CSS:

#switch{
    margin-left: auto;
    margin-right: auto;
    width: 996px;
    height: 374px;
}

#switch img{
    display:none;
}

#switch img.active{
    display:block;
}

Answer 1

我创建了一个 Fiddle ，对我来说效果很好。

我唯一改变的地方(除了为展示目的添加颜色之外)是我改变了你的 setInterval 调用:

 setInterval(swapImages, 5000);

通常，将字符串传递给 setInterval 不是一个好习惯。它的工作方式类似于 eval，我们都知道这是邪恶的 :)。传递一个函数给它。如果你真的想做更多，使用闭包(这里没有必要)。