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

表題の通り、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}

行動規範の内容に同意します

回答2件

ベストアンサー

追加して消す、追加して消す、という方法でやるより、
あらあじめ表示したいすべての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

一番最初の５秒間だけ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

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

行動規範の内容に同意します

一例です。

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 編集

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

行動規範の内容に同意します

あなたの回答