Javascript幻燈片顯示沒有圖像的一個迭代

幻燈片顯示pic1.jpg通過pic8.jpg，然後沒有圖像4秒，然後從pic1.jpg開始。我希望它能在pic8.jpg之後回到pic1.jpg。Javascript幻燈片顯示沒有圖像的一個迭代

這裏是我的腳本：

<script> 
var pics = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic6.jpg", "pic7.jpg", "pic8.jpg"]; 
var i = 1; 
function changeImage() { 
    var image = document.getElementById('homeslideshow'); 
    if (i < pics.length) { 
     image.src = pics[i] 
     i++; 
    } 
    else { 
     image.src = pics[i] 
     i = 0; 
    } 
} 
</script>

的函數調用與HTML：

<body onload="setInterval(function(){changeImage()}, 4000)">

而且幻燈片顯示有：

<div id="section"> 
    <img id="homeslideshow" src="pic1.jpg" alt="goofy" width="100%" height=auto> 
</div>

我是一個總新手到html/css/js，所以請好好！任何幫助將非常感激。

來源

2015-09-19 SSurm

嘗試更換您的其他部分如'否則{I = 0; image.src =圖片[I]; }' – Lal

你也在'image.src = pics [i]'後面缺少';'。 – Lal

這擺脫了沒有圖像，但現在pic1.jpg顯示8秒，而不是pic8.jpg後4。任何想法爲什麼？ – SSurm

更換你else塊如下

else { 
    i = 0; 
    image.src = pics[i]; 
}

在你的代碼，當你被的i值設置爲0之前設置image.src，實際上你正在設置圖像src pics[8]這是無效的。

此外，你缺少的if塊;後image.src = pics[i]。

UPDATE

替換如下您的JS解決您的8秒問題

<script> 
var pics = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic6.jpg", "pic7.jpg", "pic8.jpg"]; 
var i = 0; 
function changeImage() { 
    var image = document.getElementById('homeslideshow'); 
    if (i < pics.length-1) { 
     i++; 
     image.src = pics[i]; 
    } 
    else { 
     i = 0; 
     image.src = pics[i]; 
    } 
} 
</script>

來源

2015-09-19 18:08:02 Lal

查看編輯答案@SSurm – Lal

謝謝你的回答。那麼，對於i = 7，「i SSurm

oops ...只需一分鐘....將更新答案.. – Lal

您使用4000ms延遲。刪除。的setInterval（函數（）{changeImage（）}）

來源

2015-09-19 18:02:03 JavaForAndroid

這只是使幻燈片瞬間通過每張照片更改。我希望每張照片都能顯示4秒，這就是4000的功能。除了pic8.jpg（i = 7）和pic1.jpg（i = 0）之間有4秒沒有圖像以外，它正常工作。 – SSurm

您可以使用超時或更改延遲。在我看來，超時會是一種優雅的方式。沒有圖像是因爲早期設置src工具。有關更多信息，請參閱其他答案。 – JavaForAndroid

Javascript幻燈片顯示沒有圖像的一個迭代

回答

相關問題