2013-08-22 16 views
0

http://jonraasch.com/blog/a-simple-jquery-slideshow試圖讓我創建了一個的jsfiddle一個簡單的jQuery幻燈片中的jsfiddle

工作中使用的代碼。

問題是幻燈片不在的jsfiddle工作,所以我不能再適應它適合我的需要

人看到的問題是什麼

http://jsfiddle.net/UUKP4/8/

代碼

function slideSwitch() { 
      var $active = $('#slideshow IMG.active'); 

      if ($active.length == 0) $active = $('#slideshow IMG:last'); 

      // use this to pull the images in the order they appear in the markup 
      var $next = $active.next().length ? $active.next() 
       : $('#slideshow IMG:first'); 

      $active.addClass('last-active'); 

      $next.css({opacity: 0.0}) 
       .addClass('active') 
       .animate({opacity: 1.0}, 1000, function() { 
        $active.removeClass('active last-active'); 
       }); 
     } 

     $(function() { 
      setInterval("slideSwitch()", 5000); 
     }); 

     </script> 

     <style type="text/css"> 

     /*** set the width and height to match your images **/ 

     #slideshow { 
      position:relative; 
      height:350px; 
     } 

     #slideshow IMG { 
      position:absolute; 
      top:0; 
      left:0; 
      z-index:8; 
      opacity:0.0; 
     } 

     #slideshow IMG.active { 
      z-index:10; 
      opacity:1.0; 
     } 

     #slideshow IMG.last-active { 
      z-index:9; 
     } 

     </style> 


     <div id="slideshow"> 
      <img src="http://jonraasch.com/img/slideshow/simple-jquery-slideshow.png" alt="Slideshow Image 1" class="active" /> 
      <img src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" alt="Slideshow Image 2" /> 
      <img src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" alt="Slideshow Image 3" /> 
      <img src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" alt="Slideshow Image 4" /> 
    </div> 

回答

3

您的代碼有問題。你已經發送給setInterval的處理程序有額外的括號。

向函數發送處理函數時,我們不寫括號。如果它們被寫入,實際發生的是函數(slideSwitch())被調用並且它的返回值被髮送到函數(setInterval)。

$(function() { 
    setInterval(slideSwitch, 5000); // Not slideSwitch() 
}); 

現在,它的工作

jsFiddle Demo

2

從您的setInterval刪除括號:

setInterval(slideSwitch, 5000); 

setInterval的第一個參數查找每毫秒運行一次的函數。而不是引用該函數,而是調用它。在你的例子中,你實際上是在第一個參數中調用函數(並且一旦你的腳本加載了)。我想象你的函數返回null,所以你不會得到一個JavaScript錯誤,但簡單地null每5000ms運行一次。

+0

@Sergio - TA,完成。 –