Automaticng Array Of Images

Мне нужно автоматизировать ряд светофоров, чтобы они переходили от красного к красно-янтарному в зеленый, а затем к янтарю самостоятельно, любая помощь?Automaticng Array Of Images

Это код, у меня сейчас

<!DOCTYPE html> 
<html> 
    <body> 
     <style type="text/css"> 
      #box { 
       text-align: center; 
       font-size: 20px; 
       vertical-align: middle; 
       display: inline-block; 
       min-width: 100px; 
       min-height: 30px; 
       padding: 10px; 
       background-color: #FFF; 
      } 
     </style> 

     <body> 
      <img id="light" src="Traffic_Light_Red.png"> 
      <button type="button" onclick="changeLights()">Click to Change The Light Sequence</button> 
      <script> 
       var list = [ 
        "Traffic_Light_Red.png", 
        "Traffic Light Red And Yellow Only.png", 
        "Traffic Light Green Only.png", 
        "Traffic Light Yellow Only.png" 
       ]; 

       var index = 0; 

       function changeLights() { 
       index = index + 1; 

       if (index == list.length) index = 0; 

       var image = document.getElementById('light'); 

       image.src=list[index]; 
      } 

      </script> 
     } 
     </script> 
    </body> 
</html>

источник

2017-02-17 Hamzaa Hussain

Вы должны обеспечить работающий источник этих изображений. –

Ваш исходный код довольно беспорядок сломанных тегов ... – Cerbrus

При условии, список имен файлов изображений перевести только URL код должен работать.

У вас есть две сломанные метки до закрытия </body> тега, который вы должны удалить:

} 
</script>

Но они не должны быть причиной изображение не появляется.

Ниже приведен код:

var list = [ 
 
    "Traffic_Light_Red.png", 
 
    "Traffic Light Red And Yellow Only.png", 
 
    "Traffic Light Green Only.png", 
 
    "Traffic Light Yellow Only.png" 
 
    ]; 
 

 
var index = 0; 
 

 
function changeLights() { 
 
    var image = document.getElementById('light'); 
 
    var desc = document.getElementById('description'); 
 
    index = index + 1; 
 
    if (index == list.length) { 
 
    index = 0; 
 
    } 
 
    
 
    image.src = list[index]; 
 
    // for demo purposes 
 
    desc.innerHTML = image.src; 
 
}

#light { 
 
    width: 25px; 
 
    height: 25px; 
 
    display: block; 
 
    margin: 25px; 
 
    background-color: #fee; 
 
} 
 

 
button { 
 
    padding: 15px; 
 
} 
 

 
#description { 
 
    width: 400px; 
 
    height: 50px; 
 
    margin: 10px; 
 
}

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

 
<button type="button" onclick="changeLights()">Click to Change The Light Sequence</button> 
 

 
<div id="description"></div>

источник

2017-02-17 15:45:13

ответ

Смежные вопросы