是否可以在此代码中添加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张照片？

回答

相关问题