使用JavaScript的圖像數組

我需要使用JavaScript創建圖像數組。我需要創建一個圖像數組來循環使用它們的src屬性來遍歷它們。然後圖像需要循環到下一個和上一個按鈕。圖像必須在整個循環中循環。換句話說，沒有他們結束。點擊下一步時，一旦你點擊圖像的末尾，他們應該從第一個圖像開始，然後重複。使用JavaScript的圖像數組

有人可以寫一個簡單的代碼嗎？我真的很感激。

來源

2012-12-10 Ingrid

你想創建一個滑塊嗎？ –

滑塊，但使用類似這樣的數組 var imgArray = new Array（）; imgArray [0] = new Image（）; imgArray [0] .src ='bird.jpg'; imgArray [1] = new Image（）; imgArray [1] .src ='rose.jpg'; imgArray [2] = new Image（）; imgArray [2] .src ='cow.jpg'; imgArray [3] = new Image（）; imgArray [3] .src ='dog.jpg'; – Ingrid

如果您嘗試創建滑塊，請參閱此[小提琴]（http://jsfiddle.net/SyTFZ/4/）。在您閱讀並試圖理解它之後，請告訴我們如何提供幫助。 –

我很無聊，我以前沒有建立過其中之一。這是我想出的：http://jsfiddle.net/grantk/pHdAN/

<div id="images" style="height:300px;"> 
    <img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg" /> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" /> 
    <img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png" /> 
</div> 
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a> 

<script> 
var imgArr = document.getElementById('images').getElementsByTagName('img'); 

//Hide all images except first 
for(var i=1; i<imgArr.length; i++){ 
    imgArr[i].style.display = "none"; 
} 
i=0; 

document.getElementById('prev').onclick = function(){ 
    if(i===0){ 
     imgArr[i].style.display = "none"; 
     i=imgArr.length-1; 
     imgArr[i].style.display = ""; 
    } 
    else{ 
     imgArr[i].style.display = "none"; 
     i--; 
     imgArr[i].style.display = ""; 
    } 
} 

document.getElementById('next').onclick = function(){ 
    if(i===imgArr.length-1){ 
     imgArr[i].style.display = "none"; 
     i=0; 
     imgArr[i].style.display = ""; 
    } 
    else{ 
     imgArr[i].style.display = "none"; 
     i++; 
     imgArr[i].style.display = ""; 
    } 
} 
</script>

來源

2012-12-10 07:29:56 gkiely

感謝您的答覆！有沒有辦法讓圖像循環？而不是保存這些圖像的div使用數組？ – Ingrid

使用JavaScript的圖像數組

回答

相關問題