圖像沒有填充div

試圖創建一個類與JavaScript的簡單幻燈片。出於某種原因，圖像未加載到div中。圖像沒有填充div

腳本：

var imageArray = ['img/br1.jpg', 'img/br2.jpg', 'img/br3.png', 'img/br4.gif', 'img/br5.jpeg', 'img/br6.jpeg', 'img/br7.jpeg']; 
var i = 0; 

function slideShow() { 
document.getElementById('slideshowdiv').src = imageArray[i]; 

//increment i by 1 
i++; 

// checks if i is greater than or equal to the length 
if(i >= imageArray.length) { 
    // if true, resets value to 0 
    i = 0; 
}; 

//recall the change function every 2 seconds 
timer = setTimeout('slideShow()', 2000); 

} 
function stopShow() { 
    clearTimeout(timer); 
};

HTML：

<body onload="slideShow()"> 
<div id="slideshowdiv"></div>

來源

2014-05-12 trev

不要使用'setTimeout'也不'setInterval'處理字符串，因爲它就像邪惡'eval'！使用函數：'setTimeout（slideShow，2000）' – Oriol

檢查控制檯是否有錯誤？ – j08691

是的，沒有。 @ j08691 – trev

slideshowdiv沒有.src因爲它是一個<div>而不是<img>

此：

應該是這樣的：

var div = document.getElementById('slideshowdiv'); 
div.innerHTML = div.innerHTML + '<img src="' + imageArray[i] + '" />';

來源

2014-05-12 17:13:25 Biotox

您可以使用'+ ='來避免重複'div.innerHTML' – Oriol

嘗試過，但仍然無效：/ @Biotox – trev

@trev您是否在'div'中寫入''？ – Biotox

我在這裏看到一些潛在的錯誤。所有的

首先，我想你想使用setInterval代替setTimeout。用法是一樣的，你只需要改變函數名。你可能只需調用你的slideShow函數一次（就像你在onload調用中一樣），並讓超時鏈，但這導致我們到下一個問題。
timer變量未在您的slideshow函數的範圍之外聲明。這意味着你的stopShow函數將無法看到它。在本例中，您將需要在完成所有代碼後調用var timer = setInterval(slideShow, 2000)。你實際上沒有在你的變量之前聲明var來消除bug。
最後，我不認爲設置一個<div>元素的src屬性是你想要做的。

最簡單的解決方案是一個<img>標籤附加到<div>像這樣：

var div = document.getElementById('slideshowdiv'); 
div.innerHTML = '<img src="' + imageArray[i] + '" />';

來源

2014-05-12 17:23:21 adu

謝謝，這是我剛剛從上面的答案中添加的。謝謝（你的）信息。 – trev

圖像沒有填充div

回答

相關問題