如何从我的文档中添加照片到我的HTML

时间:2017-02-24 14:29:50

标签: javascript html

我找不到任何方法可以让我循环浏览照片,除非我有一个我现在的代码在下面。我无法在代码中找到错误。

<!DOCTYPE html>
<html>
    <body>

        <img id="light">

        <script>
            var list= ['':]; //this is where i would have the web address but its not efficent as it soetimes dosent load
            var i = 0;
            function lightsCycle() {

                i = (i < list.length - 1) ? ++i : 0;

                document.getElementById("light2").src = list[i];
            }

        </script>

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

    </body>
</html>

好吧所以几天后我现在更新了我的代码我已经将所有图像放在一个名为assests的文件夹中,它们都是正确的名称但没有任何作用我只是被带到了201%的页面

<!DOCTYPE html> 
<html> 
<body>   
  <p>This is  my Traffic Light script</p> 
  <img id="light" src="./assets/red.jpg">
  <button type="button" onclick="changeLights()">Change Lights</button>  
  <script> 
    var list = ["./assets/red.jpg","./assets/redamber.jpg", "./assets/green.jpg","./assets/amber.jpg" ];
    var index = 0;
    function changeLights() {
      index = index + 1;      
      if (index == list.length) 
        index = 0;      
      var image = document.getElementById('light');     
      image.src = list[index]; 
    } 
  </script>  
</body> 
</html>  

1 个答案:

答案 0 :(得分:0)

你有一个基本问题,指向ID light2,你的img标签只说light呵呵

我已经尝试过,并且每个工作都很好,我也添加了一个基本图像来加载,检查一下:https://jsfiddle.net/dou30sqp/