简单的JQuery定时图像旋转

出于某种原因，以下不起作用。这是最有可能的我没有任何睡眠的产品和解决方案可能是非常简单的...简单的JQuery定时图像旋转

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

来源

2011-05-30 coderego

这里有一个插件;）

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

它的重量非常轻，并且为动画切换图像提供了一些不错的选择。

来源

2011-05-30 14:33:30 Patricia

好找！不错的插件，但是，它不像我写的那么轻......我所有的东西都是我需要的，所以我希望尽可能让它工作。我只是难住为什么这不起作用。 – coderego 2011-05-30 14:36:56

我创建了一个Fiddle，它适用于我。

我已经改变（除了添加，以用于演示的颜色）的唯一的事情是我已经改变了你的setInterval调用此：

setInterval(swapImages, 5000);

一般来说，它不是一个字符串传递给setInterval一个很好的做法。它的作品像eval，我们都知道它是邪恶的:)。传递一个函数给它。如果你真的想做更多的事情，可以使用闭包（这里不需要）。

来源

2011-05-30 14:40:36 kapa

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

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

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

来源

2011-05-30 14:41:20 Niklas

简单的JQuery定时图像旋转

回答

相关问题