在javascript中循環一系列圖像

我想在javascript中循環一系列圖像。下面是我到目前爲止的代碼在javascript中循環一系列圖像

<html> 
<head> 
</head> 

<body> 
<img src="images/image1.jpg" alt="rotating image" width="600" height="500" id="rotator"> 

<script type="text/javascript"> 
(function() { 
var rotator = document.getElementById('rotator'); // change to match image ID 
//var imageDir = 'images/';       // change to match images folder 
var delayInSeconds = 1;       // set number of seconds delay 
// list image names 
var images = ['1.jpg','2.jpg', '3.jpg', '4.jpg']; 

// don't change below this line 
var num = 0; 
var changeImage = function() { 
    var len = images.length; 
    rotator.src = images[num++]; 
    if (num == len) { 
     num = 0; 
    } 
}; 
setInterval(changeImage, delayInSeconds * 50); 
})(); 
</script> 
</body> 
</html>

它只能顯示我在「var image」中聲明的圖像。如果我有10000圖像，該怎麼做。我曾嘗試使用'for'循環，但它失敗..任何建議？在此先感謝

=========================================== ===================約瑟建議

更新版本：

<html> 
<head> 
</head> 

<body> 
<img src="images/1.jpg" alt="rotating image" width="600" height="500" id="rotator"> 

<script type="text/javascript"> 
(function() { 
var rotator = document.getElementById('rotator'), //get the element 
    var delayInSeconds = 1,       //delay in seconds 
    var num = 0,          //start number 
    var len = 9999;          //limit 
setInterval(function(){       //interval changer 
    num = (num === len) ? 0 : num;    //reset if limit reached 
    rotator.src = num + '.jpg';      //change picture 
    num++;          //increment counter 
}, delayInSeconds * 1000); 
}()); 
</script> 
</body> 
</html>

來源

2012-05-15 Eric

1.確實輪換圖像的平均變化？ 2.你給正確的文件夾路徑？我在代碼中看不到。 – sree

什麼*「失敗」*？ – Joseph

我把html文件和代碼放在一起，所以我認爲dun需要路徑嗎？ @約瑟夫，它只顯示第一張圖片，第二張圖片不會出來 – Eric

假設圖像具有相同的順序文件名，這將是最好的時候，循環其中很多：

(function() { 
    var rotator = document.getElementById('rotator'), //get the element 
     dir = 'images/',        //images folder 
     delayInSeconds = 1,       //delay in seconds 
     num = 0,          //start number 
     len = N;          //limit 
    setInterval(function(){       //interval changer 
     rotator.src = dir + num+'.jpg';    //change picture 
     num = (num === len) ? 0 : ++num;    //reset if last image reached 
    }, delayInSeconds * 50); 
}());

來源

2012-05-15 06:09:01 Joseph

我已將代碼放在上面 – Eric

@Eric我的代碼不包含圖片文件夾。進行必要的更改，而不僅僅是複製粘貼。 – Joseph

我把文件與圖像相同的文件夾。它只顯示第一張圖片，並沒有顯示下一張圖片 – Eric

AFAIK，您可以使用相同的邏輯來顯示圖像在小塊，因爲您的瀏覽器將崩潰如果您嘗試同時顯示所有10000張圖像。請使用當前邏輯在頁面上顯示5-10張圖像，並要求用戶檢索下一組圖像。您可以在許多圖像共享應用程序中看到這種實現。希望這將幫助你

來源

2012-05-15 06:15:07 UVM

我正在做一個程序，它可以自動顯示圖像的速度很快，它將實際上類似於視頻。 – Eric

那麼，但你如何將這些許多圖像存儲在瀏覽器中？ – UVM

我認爲它會存儲在瀏覽器中。僅顯示一系列圖像是很重要的。 – Eric

在javascript中循環一系列圖像

回答

相關問題