簡單的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定時圖像旋轉

回答

相關問題