画像の配列を自動で設定する

信号の配列を自動化する必要があるので、赤から赤、緑、緑の順に表示されます。画像の配列を自動で設定する

これは私が今のコードは動作するはず有効なURLに変換した画像のファイル名のリストを提供

<!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

を持っているコードです。

あなたは削除すべき終了</body>タグの前に2個の壊れたタグを持つ：

} 
</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

画像の配列を自動で設定する

答えて

関連する問題