jquery/javascript圖片幻燈片

我正在一個簡單的（至少我以爲它是）我的網站的圖像幻燈片。我是jquery和javascript的新手，所以我的腳本可能有點狡猾。下面的代碼：jquery/javascript圖片幻燈片

$（函數（）{

var images = ["images/animal_full_2.jpg","images/church_full_1.jpg", "images/city_full_2.jpg", "images/faith_full_1.jpg", "images/flower_full_2.jpg", "images/gloom_full_2.jpg"]; 

function swapImages() 
    { 

     images=0; 
     $("#"+images).fadeOut(2000,function(){ 
      (this).attr('src',++images).fadeIn(2000,function(){ 
       setTimeout(swapImages(),2000) 
      }); 


     }); 

    }

}）;

現在，我試圖實現的是幻燈片放映，以便數組中的圖像以固定的時間間隔進行更改，並且他們再次開始，但這是您可以看到的情況（請注意，通過包含URL我並非試圖宣傳我的網站，而只是簡單地說明腳本如何不起作用）： http://antobbo.webspace.virginmedia.com/photogallery/testscript/home.htm 圖像全部顯示在主頁上。有沒有人有任何建議如何讓它工作？非常感謝

來源

2011-10-09 sami

有幾個jquery插件提供此功能。爲什麼重新發明輪子？ – markijbema

自己寫作是一種學習的好方法。 – Jack

取決於你有多少時間，如果你有時間我也可以投票自己去學習它，但是在很多情況下，當時間緊迫時，你會提出這個問題，客戶在你的脖子上呼吸，這是在那些我讚美那些它在我之前:) – Sander

到目前爲止，您的工作有幾個問題，因此您可能會更容易看到一個工作示例。這應該與您的文檔：

$(function() { 
    var imgs = $('.home_page_pic img').hide(), index = 0; 

    imgs.eq(index).show(); 

    function swapImages() { 
     imgs.eq(index).fadeOut(2000, function(){ 

     index++; 
     if (index == imgs.length) { 
      index = 0; 
     } 
     imgs.eq(index).fadeIn(2000, swapImages); 
     }); 
    } 

    swapImages(); 
});

來源

2011-10-09 22:03:24 Jack

謝謝你！有幾件事情不清楚：1）當你說「imgs.length」時，它有價值5.那是什麼？ 2）在這一行imgs.eq（index）.fadeIn（2000，swapImages）;在這一行中，我們認爲長度返回字符串中的字符串的數量。 swapImages是一個回調函數。爲什麼我們需要它？從我讀的回調函數那裏阻止另一個函數在動畫之前運行。所以爲什麼你使用它。 3）在腳本結尾再次調用swapImages（）：爲什麼要這樣做？ – sami

傑克對不起剛剛注意到一些東西。第一次運行圖片時，腳本不起作用。後來的運行是好的，看看：http://antobbo.webspace.virginmedia.com/photogallery/home.htm – sami

這與您發佈的原始頁面完美結合。我在你的網站上打開了一個JS控制檯並進行了測試。 – Jack

jquery/javascript圖片幻燈片

回答

相關問題