質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

Q&A

解決済

2回答

3050閲覧

JS 複数画像の出力と削除(初期化)のループ方法

1-Ichi

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

0グッド

0クリップ

投稿2020/10/31 14:42

編集2020/11/01 05:45

表題の通り、JSで画像を5秒間隔で2枚同時に切り替えるプログラムの書き方でつまずいています。

HTMLとCSSは問題なさそうですが、JSで2回目以降の画像切り替えができません。
JSでどのように記述したら、正しくCSSを反映させたまま画像を切り替え表示させ続けることが可能でしょうか?

お手数をおかけしますが、ご助言のほどお願いします。

以下、そのコードを貼ります。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>自動画像切り替えページ</title> 6 <link rel="stylesheet" href="index.css"> 7<!-- <script src="index.js"></script> --> 8</head> 9<body> 10 <img" id="pic_1" src="pictures/1.png"> 11 <h1>画像切り替えサイト</h1> 12 <h2>* 5秒ごとに画像を切り替えます</h2> 13 <div class="pic_container"> 14 <script src="index.js"></script> 15 <script src="index.js"></script> 16 <!-- <img id="pic_1" src="pictures/1.png"> 17 <img id="pic_2" src="pictures/4.png"> --> 18 </div> 19</body> 20</html>

CSS

1html{ 2 background-color: black; 3} 4 5h1{ 6 padding-left: 450px; 7 color: white; 8 display: inline; 9} 10 11h2{ 12 display: inline; 13 color: white; 14 padding-left: 80px; 15} 16 17.pic_container { 18 padding-top: 15px; 19 display: flex; 20 justify-content: space-between; 21} 22 23img{ 24 /*JSのHTML出力したも要素であっても対応する。*/ 25 height: 460px; 26 width: 620px; 27}

JavaScript

1var rPicList = new Array( 2 "pictures/1.png","pictures/2.png","pictures/3.png","pictures/4.png","pictures/5.png"); 3 4 var num = -1; 5 slideshow_timer(); 6 function slideshow_timer(){ 7 var pNum = Math.floor(Math.random() * rPicList.length); 8 var printHtml = '<img src=' + rPicList[pNum] + '>'; 9 10 // if (num == rPicList.length){ 11 // num = 0; 12 // printHtml.remove(); 13 // } 14 // else { 15 // num ++; 16 // // var printHtml = '<img src=' + rPicList[pNum] + '>'; 17 // // document.remove(printHtml); 18 // } 19 20 // if () {} 21 document.write(printHtml); 22 // document.remove(printHtml); 23 setTimeout("slideshow_timer()",5000); 24 }

removeメソッドを使えば、HTMLとして出力した画像を切り替えられると予想しましたが、失敗しました。
removeメソッドが効かず一度だけ画像が変わった後、無限に画像がランダムに2枚ずつビュー上で表示されます。
このため、ページ自体が無限に縦長になっていきます。

PS 写真の追記とそのJSコードです。
イメージ説明

JavaScript

1var rPicList = new Array( 2 "pictures/1.png","pictures/2.png","pictures/3.png","pictures/4.png","pictures/5.png", 3 "pictures/6.png","pictures/7.png","pictures/8.png","pictures/9.png","pictures/10.png", 4 "pictures/11.png","pictures/12.png","pictures/13.png","pictures/14.png","pictures/15.png", 5 "pictures/16.png","pictures/17.png","pictures/18.png","pictures/19.png","pictures/20.png", 6 "pictures/21.png","pictures/22.png","pictures/23.png","pictures/24.png","pictures/25.png", 7 "pictures/26.png","pictures/27.png","pictures/28.png","pictures/29.png"); 8 9slideshow_timer(); 10function slideshow_timer(){ 11 var pNum = Math.floor(Math.random() * rPicList.length); 12 var printHtml = new Image();// imgタグを生成 13 printHtml.src = rPicList[pNum]; 14 document.querySelector('.pic_container > img').remove(); 15 document.querySelector('.pic_container').appendChild(printHtml); 16 setTimeout("slideshow_timer()",5000); 17}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

追加して消す、追加して消す、という方法でやるより、
あらあじめ表示したいすべてのimgをhtmlに書いておき、
JSでCSSを操作して見えるようにしたり見えないようにしたりするのが普通です。

質問者さんの方法でやるなら

javascript

1var rPicList = new Array( 2 "pictures/1.png","pictures/2.png","pictures/3.png","pictures/4.png","pictures/5.png"); 3 4 var num = -1; 5 slideshow_timer(); 6 function slideshow_timer(){ 7 var pNum = Math.floor(Math.random() * rPicList.length); 8 var printHtml = new Image();// imgタグを生成 9 printHtml.src = rPicList[pNum]; 10 document.querySelector('.pic_container > img').remove(); 11 12 // if (num == rPicList.length){ 13 // num = 0; 14 // printHtml.remove(); 15 // } 16 // else { 17 // num ++; 18 // // var printHtml = '<img src=' + rPicList[pNum] + '>'; 19 // // document.remove(printHtml); 20 // } 21 22 // if () {} 23 document.querySelector('.pic_container').appendChild(printHtml); 24 setTimeout("slideshow_timer()",5000); 25 }

投稿2020/11/01 03:57

編集2020/11/01 05:44
Itta

総合スコア105

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

1-Ichi

2020/11/01 04:38

追加して消す、追加して消す、という方法でやるより、 「あらあじめ表示したいすべてのimgをhtmlに書いておき、 JSでCSSを操作して見えるようにしたり見えないようにしたりするのが普通です。」 → それが一般的なのですね。知りませんでした。ありがとうございます。
1-Ichi

2020/11/01 05:00

以下のコードをJSに記述したのですが、ページ初回読み時ですら、画像が表示されなくなりました。 配列の、pictures/1.png"… というパス自体は正しいので、他に原因が思いつきません。 var rPicList = new Array( "pictures/1.png","pictures/2.png","pictures/3.png","pictures/4.png","pictures/5.png", "pictures/6.png","pictures/7.png","pictures/8.png","pictures/9.png","pictures/10.png", "pictures/11.png","pictures/12.png","pictures/13.png","pictures/14.png","pictures/15.png", "pictures/16.png","pictures/17.png","pictures/18.png","pictures/19.png","pictures/20.png", "pictures/21.png","pictures/22.png","pictures/23.png","pictures/24.png","pictures/25.png", "pictures/26.png","pictures/27.png","pictures/28.png","pictures/29.png"); slideshow_timer(); function slideshow_timer(){ var pNum = Math.floor(Math.random() * rPicList.length); var printHtml = new Image();// imgタグを生成 printHtml.src = rPicList[pNum]; document.querySelector('.pic_container > img').remove(); document.querySelector('.pic_container').appendChild(printHtml); setTimeout("slideshow_timer()",5000); }
1-Ichi

2020/11/01 05:01

HTMLとして出力するのがうまく動作していないのでしょうか?
Itta

2020/11/01 05:35

なにかエラーは出ていますか?
1-Ichi

2020/11/01 05:42

少なくとも、chromeでエラーメッセージは表示されていないです。
1-Ichi

2020/11/01 05:46

また、質問文に PSとしてその現象とコード(JSのみ)を追記しました。 よろしくお願いいたします。
Itta

2020/11/01 05:49

コードを次のように書き換えてみてください var rPicList = new Array( "pictures/1.png","pictures/2.png","pictures/3.png","pictures/4.png","pictures/5.png", "pictures/6.png","pictures/7.png","pictures/8.png","pictures/9.png","pictures/10.png", "pictures/11.png","pictures/12.png","pictures/13.png","pictures/14.png","pictures/15.png", "pictures/16.png","pictures/17.png","pictures/18.png","pictures/19.png","pictures/20.png", "pictures/21.png","pictures/22.png","pictures/23.png","pictures/24.png","pictures/25.png", "pictures/26.png","pictures/27.png","pictures/28.png","pictures/29.png"); slideshow_timer(); function slideshow_timer(){ var pNum = Math.floor(Math.random() * rPicList.length); var printHtml = new Image();// imgタグを生成 printHtml.src = rPicList[pNum]; if (document.querySelector('.pic_container > img') !== null) { document.querySelector('.pic_container > img').remove(); } document.querySelector('.pic_container').appendChild(printHtml); setTimeout("slideshow_timer()", 5000); }
1-Ichi

2020/11/01 05:54

無事に、一定間隔で画像がランダムに切り替わりました。 ありがとうございます。 重ねて質問で恐縮ですが、ソースコードから推測するに、if文で、表示中の画像のnullか否か確認をしないと、自動で切り替わらないということでしょうか? しかし先ほどは、ページ読み込み時ですら画像が表示されませんでした。
Itta

2020/11/01 05:59

一番最初の5秒間だけimgはないので、その状態で存在しない要素を削除しようとすると不具合が起きてしまいます。 .pic_container内のimgが見つからなければnullが帰ってくるので、存在しなければ削除しないというコードになっています。
1-Ichi

2020/11/01 06:15 編集

ご回答ありがとうございます。 また、今更で恐縮ですが、以下のコードについて質問したいです。 var printHtml = new Image();// imgタグを生成 ①img タグを生成とコメントされているのですが、変数名でimg はどこかに記載されているのでしょうか? ②それとも単純に配列を作成しているだけでしょうか? ③上記②の場合は、そのimgが、document.querySelector('.pic_container > img')で使用されているのでしょうか? 恥ずかしながら、処理の流れについて、理解できておりません。
Itta

2020/11/01 06:33

new Image()はdocument.createElement('img');と同等の意味です。 document.querySelector('.pic_container > img')は.pic_containerのなかのimgを取得するということです。
1-Ichi

2020/11/01 06:46

ご回答ありがとうございます。 理解できました。 ありがとうございます。
guest

0

一例です。

htmlファイルと同階層に
imgフォルダを作成して中に
1.png ~ 5.pngを入れる。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>画像ランダム切替</title> 7 <style> 8 html { 9 background-color: black; 10 font-size: 0; 11 text-align: center; 12 } 13 14 body { 15 position: absolute; 16 width: 80vw; 17 height: 30vw; 18 top: 50%; 19 left: 50%; 20 transform: translate(-50%, -50%); 21 } 22 23 img { 24 width: 30vw; 25 height: 30vw; 26 display: inline-block; 27 background-color: white; 28 margin: 0 5vw; 29 } 30 </style> 31</head> 32 33<body> 34 <img src="img/1.png" alt="1の画像"> 35 <img src="img/2.png" alt="2の画像"> 36 <script> 37 38 const img = document.getElementsByTagName("img"); 39 40 const changeImg = () => { 41 let count = 0; 42 const rndArr1 = rndNum(); 43 const rndArr2 = rndNum(); 44 const changeRnd = () => { 45 const id = setTimeout(() => { 46 changeRnd(); 47 }, 5000); 48 if (count == 5) { 49 clearTimeout(id); 50 changeImg(); 51 } else { 52 img[0].setAttribute("src", "img/" + rndArr1[count] + ".png"); 53 img[1].setAttribute("src", "img/" + rndArr2[count] + ".png"); 54 img[0].setAttribute("alt", rndArr1[count] + "の画像"); 55 img[1].setAttribute("alt", rndArr2[count] + "の画像"); 56 count++; 57 } 58 } 59 changeRnd(); 60 } 61 62 const rndNum = () => { 63 const arr = []; 64 const numArr = []; 65 for (let i = 0; i < 5; i++) { 66 arr[i] = i + 1; 67 } 68 69 for (let j = 0, len = arr.length; j < 5; j++, len--) { 70 const rndNum = Math.floor(Math.random() * len); 71 numArr.push(arr[rndNum]); 72 arr[rndNum] = arr[len - 1]; 73 } 74 75 return numArr; 76 } 77 78 setTimeout(() => { 79 changeImg(); 80 }, 5000); 81 82 83 </script> 84</body> 85 86</html>

投稿2020/11/01 01:32

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

1-Ichi

2020/11/01 03:36 編集

画像をHTMLに配列として書くことは可能でしょうか? 今回は、画像を5つだけにしたのですが本当は以下のように画像が29個あり、JSで配列化しています。 var rPicList = new Array( "pictures/1.png","pictures/2.png","pictures/3.png","pictures/4.png","pictures/5.png", "pictures/6.png","pictures/7.png","pictures/8.png","pictures/9.png","pictures/10.png", "pictures/11.png","pictures/12.png","pictures/13.png","pictures/14.png","pictures/15.png", "pictures/16.png","pictures/17.png","pictures/18.png","pictures/19.png","pictures/20.png", "pictures/21.png","pictures/22.png","pictures/23.png","pictures/24.png","pictures/25.png", "pictures/26.png","pictures/27.png","pictures/28.png","pictures/29.png");
1-Ichi

2020/11/01 03:36 編集

(可能な限り写真のパスは短く書きたいと思っています。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問