###前提・実現したいこと
javascriptで「自動スライドショー コメント付き」を同html内に2つ動作させるようにしたいのですが、片方は動くのですが、もう片方は動きません。
どうしたら2つ同時に動くのでしょうか。原因がわかりません。
初心者なのですが、どうか教えてください。
###ソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.7.0 for Windows"> 6 <meta http-equiv="Content-Script-Type" content="text/javascript"> 7 <link rel="stylesheet" href="mycss.css"> 8 <title>Javascriptの練習</title> 9 <script type="text/javascript" src="myscriptA.js"></script> 10 <script type="text/javascript" src="myscriptB.js"></script> 11</head> 12<body> 13 14 <div id="container"> 15 16 <div id="header"> 17 <h1><img src="l_246.jpg" height="100" width="600"></h1> 18 </div> 19 20 <div id="main"> 21 22 <div id="contents"> 23 <h1>雲</h1> 24 <img src="a1.jpg" id="Ga" style=""> 25 <div id="Me" style="">雲 きれいです</div> 26 27 <script type="text/javascript" src="myscriptA.js"></script> 28 29 </div><!--#contents--> 30 31 <div id="sidebar"> 32 <h1>ひまわり</h1> 33 <img src="b1.jpg" id="Gaa" style=""> 34 <div id="Mea" style="">ひまわり きれいです</div> 35 36 <script type="text/javascript" src="myscriptB.js"></script> 37 38 </div><!--#sidebar--> 39 40 </div><!--main--> 41 42 <div id="footer">Copyright 2015,dotinstall.com</div> 43 44 </div><!--#container--> 45</body> 46</html> 47
css
1html{ 2 background-image: url('07.gif'); 3 height: 100%; 4} 5body{ 6 height: 100%; 7 font-family: Verdana,Arial; 8 font-size: 14px; 9} 10body > #container{ 11 height: auto; 12} 13 14#container{ 15 min-height:100%; 16 height: 100%; 17 width: 800px; 18 margin: 0 auto; 19 padding: 0 10px; 20 background-color: #fff; 21 box-shadow: 0 0 3px rgba(0,0,0,0.5); 22} 23#header{ 24 margin-bottom: 15px; 25} 26 27#main{ 28 overflow: hidden; 29} 30 31#contents{ 32 float: left; 33 width: 400px; 34} 35#sidebar{ 36 float: right; 37 width: 400px; 38} 39 40#footer{ 41 font-size: 12px; 42 color: #ccc; 43 text-align: center; 44 border-top: 1px solid #ccc; 45 padding: 10px 0 20px; 46} 47 48 /*★ここからコピー。画像とコメントの位置指定。#Gaと#Meは必須。好みで変更*/ 49 50#Ga{ 51 margin: 0px auto 0;/*★画像の中央位置指定(上 左右 下)*/ 52 width: 400px;/*★画像横幅*/ 53 height: 350px;/*★画像縦幅*/ 54 display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/ 55} 56#Me{ 57 margin: 5px auto;/*★コメントの中央位置指定(上下 左右)*/ 58 width: 400px;/*★コメントの横幅=画像の横幅。変更しても可*/ 59 border: 1px solid #ccc;/*★コメントの枠線 灰色*/ 60 padding: 3px 15px;/*★コメントの余白(上下 左右)*/ 61 box-sizing: border-box;/*★コメント領域内にパディング領域及びボーダー領域も含む*/ 62} 63#Gaa{ 64 margin: 0px auto 0;/*★画像の中央位置指定(上 左右 下)*/ 65 width: 400px;/*★画像横幅*/ 66 height: 350px;/*★画像縦幅*/ 67 display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/ 68} 69#Mea{ 70 margin: 5px auto;/*★コメントの中央位置指定(上下 左右)*/ 71 width: 400px;/*★コメントの横幅=画像の横幅。変更しても可*/ 72 border: 1px solid #ccc;/*★コメントの枠線 灰色*/ 73 padding: 3px 15px;/*★コメントの余白(上下 左右)*/ 74 box-sizing: border-box;/*★コメント領域内にパディング領域及びボーダー領域も含む*/ 75} 76 77
javascript
1//myscriptA.js の内容です。 2 3var n=0,i=0; 4//★画像とコメントの同時指定。増減可能。["画像","コメント"]; の2個をこの順番で記述。コメントにタグ使用の時は「"」ではなく「'」を使用 5var ga= new Array; 6ga[n++]=["a1.jpg","雲 きれいです"]; 7ga[n++]=["a2.jpg","雲多い きれいです"]; 8ga[n++]=["a3.jpg","虹もきれい"]; 9ga[n++]=["a4.jpg","コスモスは 風にゆれてる"]; 10ga[n++]=["a5.jpg","青い空 この世界はほんとうに<span style='color:red;'>きれい</span>です"]; 11 12var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分 13var spd=3000; //★画像切替時間 1000=1秒 14 15function Show(){ Ga.src=myurl+ga[i%ga.length][0]; Me.innerHTML=ga[i%ga.length][1];i++; setTimeout("Show()",spd); } 16window.onload=Show; 17
javascript
1//myscriptB.js の内容です。 2 3var n=0,i=0; 4//★画像とコメントの同時指定。増減可能。["画像","コメント"]; の2個をこの順番で記述。コメントにタグ使用の時は「"」ではなく「'」を使用 5var gaa= new Array; 6gaa[n++]=["b1.jpg","ひまわり きれいです"]; 7gaa[n++]=["b2.jpg","ひまわり2 きれいです"]; 8gaa[n++]=["b3.jpg","ひまわり3もきれい"]; 9gaa[n++]=["b4.jpg","ひまわり4 風にゆれてる"]; 10gaa[n++]=["b5.jpg","ひまわり5 この世界はほんとうに<span style='color:red;'>きれい</span>です"]; 11 12var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分 13var spd=3000; //★画像切替時間 1000=1秒 14 15function Show(){ Gaa.src=myurl+gaa[i%gaa.length][0]; Mea.innerHTML=gaa[i%gaa.length][1];i++; setTimeout("Show()",spd); } 16window.onload=Show; 17
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/03 07:16
2015/11/06 02:00