是否可以在此代碼中添加3張照片？

-2

完成這個任務，我必須拿到3張照片，並讓一個按鈕來循環照片新我需要讓這個我可以從我的文件。每少使用的照片可以：d是否可以在此代碼中添加3張照片？

<!DOCTYPE html> 
<html> 
<body> 

<img id="light" src="Red.png"> 

<script> 
var list= ['Green.png', 'Yellow.png', 'Red.png']; 
var i = 0; 
function lightsCycle() { 
    i = i + 1; 
    i = i % list.length; 
    var light = document.getElementById("light").src = list[i]; 
} 
</script> 

<button type = "button" onclick="lightsCycle()">Next Light</button> 
</body> 
</html>

UPDATE：我已經修改我的代碼試圖這裏給出的答案之一，但我仍然有問題：

 <!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    
 
    <img id="light" src="Red.png"> 
 
    
 
    <script> 
 
    var list= ['https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png', 
 
    'https://img.clipartfox.com/837fed127e3383c2a61cf08f76a65081_pics-for-stop-light-yellow-clipart-traffic-light-yellow_641-880.png', 
 
    'http://previews.123rf.com/images/blojfo/blojfo1003/blojfo100300021/6559248-Traffic-light-with-red-light-Stock-Photo.jpg']; 
 
    var i = 0; 
 
    function lightsCycle() { 
 
     
 
     i = (i < list.length - 1) ? ++i : 0; 
 
     
 
     document.getElementById("light").src = list[i]; 
 
    } 
 
    
 
    </script> 
 
    
 
    <img id="light" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png"> 
 
    <button type = "button" onclick="lightsCycle()">Next Light</button> 
 
    
 
    </body> 
 
    </html>

來源

2017-02-22 DMC

添加3張照片的是什麼？ –

你是否收到404錯誤？ – JoeriShoeby

沒有錯誤我沒有完全完成代碼，我只需要在排名系統中添加3張遊戲titiles的照片，如果這是有道理的，所以綠色是最好的黃色是好的，紅色是最差的，如果可能的話，他們會有燈光 – DMC

在你的函數中，你正在增加i，然後立即把這個值扔到下一行，你將i設置爲i的模數和你的數組長度。這條線是不需要的。

您還需要檢查i是否處於陣列支持的最高索引編號，如果是，請將其重置爲0。

接着，直線：

var light = document.getElementById("light").src = list[i];

不必要的聲明瞭一個名爲light，因爲你從來沒有在任何地方使用它的變量。

最後，不要使用HTML屬性掛鉤的事件處理程序（的onclick，的onmouseover，等等），因爲它們：

創建麪條代碼（HTML和JavaScript混合在同一行）是難以閱讀並保持。圍繞您的屬性值創建全局範圍的包裝函數，這會改變綁定的this並可能導致您的函數無法正常工作。不遵循W3C standards for event handling。

// Put the correct relative paths to your images back into the array. Here, I'm substituting 
 
// online images so that you can see the code working properly. 
 
var list= ['https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png', 
 
'https://img.clipartfox.com/837fed127e3383c2a61cf08f76a65081_pics-for-stop-light-yellow-clipart-traffic-light-yellow_641-880.png', 
 
'http://previews.123rf.com/images/blojfo/blojfo1003/blojfo100300021/6559248-Traffic-light-with-red-light-Stock-Photo.jpg']; 
 

 
var i = 0; 
 

 
// Only scan the document one time to get a reference to the image element. 
 
// It's a waste of resources to do it every time the button is clicked 
 
var img = document.getElementById("light"); 
 
var btn = document.getElementById("btn") 
 

 
// Don't use HTML attributes to hook up event handlers (onclick, onmouseover, etc.) 
 
btn.addEventListener("click", lightsCycle); 
 

 
function lightsCycle() { 
 
    // If i is less than the max index, increment it, otherwise set it to zero 
 
    i = (i < list.length - 1) ? ++i : 0; 
 
    // Set the source of the image element to the next array value 
 
    img.src = list[i]; 
 
}

img { width:50px; }

<img id="light" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png"> 
 
<button type="button" id="btn">Next Light</button>

來源

2017-02-22 20:14:01

你看到當你輸入該網址是否有可能從文件做到這一點？ – DMC

@DMC是的，但在這種環境下，我們需要引用可以看到的圖像。我們無法從這裏訪問您的圖片。只需將數組中的字符串替換爲圖像文件的正確相對路徑即可。 –

當我嘗試實施你給我的代碼時，我會進入新的1主頁？ – DMC

是否可以在此代碼中添加3張照片？

回答

相關問題