简单JQuery定时图像旋转

Question

由于某些原因，以下内容无效。这很可能是我睡眠不足的结果，解决方案可能很简单。。。

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，我们都知道它是邪恶的：）。给它传递一个函数。如果你真的想做更多，可以使用闭包（这里没有必要）。

Answer 2

有一个插件；）

http://jquery.malsup.com/cycle/lite/

它真的很轻，并且为动画切换图像提供了一些不错的选项。

Answer 3

document.ready函数末尾缺少);，请将setTnterval更改为实际函数。

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

工作示例：http://jsfiddle.net/niklasvh/4d6X5/