appendChild()を使ったスライドショーを作ろうと思っています。

前提・実現したいこと

三枚の画像を順番に横移動させてスライドショーを作ろうと思っています。
appendchild()を使って、スライドされた画像を最後の要素に追加するようにしてループさせようと
しているのですが、appendChildが初回のみしか作動されずなかなかうまくいきません。
なにかうまく方法があれば教えてください。

発生している問題・エラーメッセージ

appendChildが初回のみしか適応されず、二回目以降スライドされた画像が後ろにいかない。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>スライドショー</title>
8</head>
9<body>
10    <style>
11        * {
12            margin: 0;
13            padding: 0;
14            box-sizing: border-box;
15        }
16
17        .slideshow {
18            width: 500px;
19            height: 300px;
20            overflow: hidden;
21            margin: 100px;
22        }
23        .slide {
24            display: flex;
25        }
26        .slide li {
27            width: 500px;
28            height: 300px;
29            list-style-type: none;
30            
31        }
32        .slide li img {
33            width: 500px;
34            height: 300px;
35            object-fit: cover;
36        }
37        .active{
38            margin-left: -500px;
39        }
40    </style>
41    <div class="slideshow">
42        <ul class="slide">
43            <li><img src="https://photosku.com/images_file/small_images/s004_430.jpg"></li>
44            <li><img src="https://photosku.com/images_file/small_images/s007_187.jpg"></li>
45            <li><img src="https://photosku.com/images_file/small_images/s004_972.jpg"></li>
46        </ul>
47    </div> 
48    <script>
49        window.onload = sshow;
50        let slideshow = document.querySelector('.slide');
51        let imgSlide = document.querySelector('li');
52        let cnt = -1;
53
54        function sshow() {
55            
56            if (cnt === 0){
57                slideshow.classList.add('active');
58                slideshow.style.transition = '2s';  
59            }
60
61            if (cnt === 2) {              
62                slideshow.appendChild(imgSlide);
63                cnt = -1;               
64                slideshow.style.transition = 'none';                 
65                slideshow.classList.remove('active');                        
66            }
67
68            cnt++;            
69            setTimeout(sshow,2000)           
70        }   
71    </script>
72</body>
73</html>

補足情報（FW/ツールのバージョンなど）

エディタvscode ブラウザgooglechrome

yambejp

2021/09/27 03:43

https://teratail.com/questions/361382 と、どう違うのでしょう？

myozo1

2021/09/27 08:14

ボタンを押さずに自動的にスクロールするには、どうしたらよいでしょうか。。

yambejp

2021/09/27 08:21 編集

> ボタンを押さずに自動的にスクロールああ、そういう仕様なのですね setIntervalでぐるぐる回せばいいと思います何秒ごとにどのくらいのスピードでスライドするなど仕様をきめてくださいそれとサイズの違う画像はスライドには向かないと思います

myozo1

2021/09/27 08:40

前回の解答を参考にsetIntervalを使用して思っていたことができました！画像のご指摘もありがとうございます。最後まで教えていただきありがとうございました！

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

回答1件

自己解決

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> ul{ width:600px; overflow-x:hidden; list-style:none; padding:0; display:flex; } img{ object-fit: cover; } ul li:first-child{ margin-left: -600px; } ul.l li:first-child{ animation: rSlide 2s; animation-fill-mode:forwards; } @keyframes rSlide{ from{ margin-left: -600px} to { margin-left: -1200px} } </style> <script> window.addEventListener('DOMContentLoaded', ()=>{ const ul=document.querySelector('ul'); const l=document.querySelector('#l'); const r=document.querySelector('#r'); ul.insertBefore(ul.querySelector('li:last-child'),ul.querySelector('li'));

    function slide (){ 
        ul.classList.add('l');
        setTimeout(()=>{
            ul.classList.remove('l');
            ul.appendChild(ul.querySelector('li'));
        },2000);
    }

    setInterval(slide, 3500);

    });
    </script>
    <ul>
    <li><img src="image/01.jpg" width=600 height=400></li>
    <li><img src="image/02.jpg" width=600 height=400></li>
    <li><img src="image/03.jpg" width=600 height=400></li>
    </ul>

</body> </html>

投稿2021/09/27 09:02

myozo1

総合スコア2