for循環不工作在JavaScript？

-4

當我在瀏覽器中打開它時，只顯示最後一張圖像幫助爲什麼循環不起作用？for循環不工作在JavaScript？

var i=0; 
function set() 
{ 
    for(i=1; i<=5; i++) 
    { 
     var image = "<img src=images/sl" + i + ".jpg"+" width='500' height='300' style='margin-left:400px;' />"; 
     document.getElementById("slider").innerHTML = image;   
    } 
} 
setInterval("set()","600"); 

     <div id="slider"> 
      <img src="images/sl1.jpg" /> 
     </div>

我做在JavaScript一個簡單的滑動，但是當我運行這個它只是讓我從我的圖像，最後的圖像文件夾，像我有5個圖片SL1 | sl2 | ... sl5 ... 其唯一的我最後一張圖片第5 ...循環不工作..

來源

2013-06-21 Umer Best

什麼讓你覺得循環不起作用？ –

不工作永遠不是一個足夠好的描述 –

不是一個解決方案，但*不*傳遞字符串''setInterval'。正在使用'eval'！傳遞函數。 'setInterval（set，600）;'。 –

您必須追加到innerHTML，不只是設置它。

var slider =document.getElementById("slider"); 
slider.innerHTML = slider.innerHTML + image;

來源

2013-06-21 15:26:59

@downvoter - 爲什麼投票？ –

好吧，然後告訴我如何追加??? –

@UmerBest：將'='改爲'+ =':-) –

你改變DOM每一次，瀏覽器必須重新渲染頁面。爲了獲得更好的性能，只需將這個新的html存儲在臨時變量中即可。
setInterval的第一個參數應該是函數名稱，而不是字符串。

var i=0; 
function set() 
{ 
    var new_html = ''; 
    for(i=1; i<=5; i++) 
    { 
     var image = "<img src=images/sl" + i + ".jpg"+" width='500' height='300' style='margin-left:400px;' />"; 
     new_html += image;   
    } 
    document.getElementById("slider").innerHTML = new_html 
} 
setInterval(set,600); 

<div id="slider"> 
    <img src="images/sl1.jpg" /> 
</div>

來源

2013-06-21 15:32:04

但是爲什麼每600毫秒執行一次相同的功能，完全一樣呢？你確定這是OP想要代碼做什麼嗎？ – JJJ

我不知道OP實際需要什麼。我有一種感覺，這個問題是一個X-Y問題。 –

間隔延遲實際上是一個數字不是字符串 –

也許這是你想要的嗎？

function setImage(i) { 
    var image = "<img src=images/sl" + i + ".jpg" + " width='500' height='300' style='margin-left:400px;' />"; 
    document.getElementById("slider").innerHTML = image; 
} 

function loopImages(i) { 
    setImage(i); // set current Image 

    if (i == 5) {  
     i = 1; // reset the counter 
    } 

    setTimeout(function() { 
     loopImages(i++); 
    }, "600"); // set next image in 600 ms 

} 

loopImages(1);

如果你想讓它停在圖像5或循環永遠不知道...

來源

2013-06-21 15:33:18 AntouanK

for循環不工作在JavaScript？

回答

相關問題