jQuery幻燈片

我試圖創建自己的幻燈片。以下代碼從一個圖像變爲另一個圖像。我想循環從img1.jpg到img4.jpg，但我不知道如何在每次更改後暫停。jQuery幻燈片

   i++; 
       temp = "img"+i+".jpg"; 
       $("#img").fadeOut(function() { 
        $(this).load(function() { $(this).fadeIn(); }); 
        $(this).attr("src", temp); 
       });

更新：我已將代碼更改爲以下內容。在John Boker的建議下，我將圖像更名爲img0，img1，img2，img3。它到達了第一，第二，第三個圖像。有任何想法嗎？

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script> 

      $(document).ready(function(){   
       var temp=""; 

       function slideshow(i) 
       { 
        temp = "img"+i+".jpg"; 
        $("#img").fadeOut(function() { 
         $(this).load(function() { 
            $(this).fadeIn(); 
            // set a timeout of 5 seconds to show the next image; 
            setTimeout(function(){ slideshow((i+1)%4); }, 5000); 
         }); 
         $(this).attr("src", temp); 
        }); 
       } 

       slideshow(0); 


      }); 

     </script> 
    </head> 
    <body> 
     <img src="img1.jpg" id="img"/> 
    </body> 
</html>

來源

2010-01-04 usertest

你可以像這樣做，使用setInterval：

$(function() { 

    var i = 0; 

    // Four-second interval 
    setInterval(function() { 
     $("#img").fadeOut(function() { 
      $(this).attr("src", "img" + i++ % 4 + ".jpg"); 
      $(this).fadeIn(); 
     }); 
    }, 4000); 
}

我已經簡化了一些可能導致您正在尋找的其他問題的一些事情，將（看起來多餘的）電話轉到load內部您的fadeOut回調和消除不必要的temp變量。

（最後，如果你不只是這樣做是爲了學習，可以考慮使用許多優秀的幻燈片插件之一在那裏，像Cycle）

來源

2010-01-04 20:01:17

工程很好，但如何可以循環，所以當它到達img4它回到img1。我嘗試了一個if語句，但無法使其工作。謝謝。 – usertest 2010-01-04 20:22:25

糟糕，我應該提到'i'變量必須在函數之外進行初始化，以便每次函數執行時都不會在本地範圍內重新初始化。修改後的代碼應該可以工作 – 2010-01-04 20:28:06

設立window.setInterval(function, delay)在設定的時間間隔來調用一個函數來執行你的代碼。

有很多插件已經爲你循環圖像（除非挑戰是寫你自己的），我最喜歡的其中一個是cycle plugin。

來源

2010-01-04 19:59:42

看看這個jQuery slideshow question

來源

2010-01-04 19:59:59

你應該有一個函數內部：

// show image i 
function slideshow(i) 
{ 
    temp = "img"+i+".jpg"; 
    $("#img").fadeOut(function() { 
     $(this).load(function() { 
        $(this).fadeIn(); 
        // set a timeout of 5 seconds to show the next image; 
        setTimeout(function(){ slideshow((i+1)%4); }, 5000); 
     }); 
     $(this).attr("src", temp); 
    }); 
}

來源

2010-01-04 20:00:06

謝謝，它的工作原理，但與Jeff Sternal's有同樣的問題 - 它不會循環。如何在img4之後回到img1。我無法獲得if語句來執行此操作。 – usertest 2010-01-04 20:24:03

如果我是你，我會從0開始，所以它會更容易使用模數。（i + 1）％4會讓你的週期，所以如果我= 3，（3 + 1）％4 = 0.你的圖像將被命名爲img0.jpg，img1.jpg，img2.jpg，img3.jpg – 2010-01-04 20:33:45

一個技巧就是用一個動畫元素的屬性其當前值使用計時器。

如

$("#img").fadeIn().show(3000).fadeOut();

因爲$（這）已經可見，加入.show（3000）意味着元素淡出

來源

2010-01-04 20:33:08 Addsy

試試下面這個例子之前，保持3秒可見.. 。

$(function(){ 
    $('.slideshow img:gt(0)').hide(); 
    setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000); 
});

A fiddle

只需在腳本中將4000更改爲8000即可，如果要將每個圖像暫停8秒而不是4秒。

來源

2012-05-31 17:32:13 DaveAlger

回答

相關問題