三枚の画像を順番にスライドさせるスライドショーを作ろうと思っています。

前提・実現したいこと

javascript初心者です。
三枚の画像を順番にスライドさせるスライドショーを作ろうと思っています。
三枚の画像を順番にスライドさせるところまではできたのですが、
ループをさせるために一番最初の画像を最後に追加していくというやり方をしようと考えているのですが
そこがいまいちわかりません。
何かいい方法があれば教えてほしいです。

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

エラーメッセージ

該当のソースコード

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    <link rel="stylesheet" href="style.css">
8    <title>スライドショー</title>
9</head>
10<body>
11    <div id="slide">
12        <img src="images/01.jpg">
13        <img src="images/02.jpg">
14        <img src="images/03.jpg">
15    </div>
16    <script>
17        window.onload = slideshow;
18
19        let imgArray = document.querySelectorAll('#slide img')
20        let len =  imgArray.length 
21        var cnt = -1;
22
23        function slideshow(){
24            if (cnt >= 0){
25                imgArray[cnt].classList.add('active');    
26            }
27                
28            if (cnt === 2){
29                cnt = 0;
30            }
31            cnt++;
32            setTimeout(slideshow,3000)
33        }   
34    </script>
35</body>
36</html>
37
38css
39@charset "UTF-8";
40
41#slide {
42    width: 500px;
43    height: 400px;
44    overflow: hidden;
45    display: flex;
46   
47}
48#slide img {
49    width: 500px;
50    height: 400px;
51    object-fit: cover;
52    transition: margin-left  2s;
53}
54.active {
55    margin-left: -500px;   
56}
57

試したこと

appendChildを使って画像を追加してみたがよくわかりませんでした。

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

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

こんな感じで

javascript
1<style>
2ul{
3width:100px;
4overflow-x:hidden;
5list-style:none;
6padding:0;
7display:flex;
8}
9ul li:first-child{
10  margin-left: -100px;
11}
12ul.l li:first-child{
13  animation: rSlide 1s; 
14  animation-fill-mode:forwards;
15}
16ul.r li:first-child{
17  animation: lSlide 1s ;
18  animation-fill-mode:forwards;
19}
20@keyframes rSlide{
21  from{ margin-left: -100}
22  to  { margin-left: 0}
23}
24@keyframes lSlide{
25  from{ margin-left: -100}
26  to  { margin-left: -200}
27}
28</style>
29<script>
30window.addEventListener('DOMContentLoaded', ()=>{
31  const ul=document.querySelector('ul');
32  const l=document.querySelector('#l');
33  const r=document.querySelector('#r');
34  ul.insertBefore(ul.querySelector('li:last-child'),ul.querySelector('li'));
35  l.addEventListener('click',()=>{
36    ul.classList.add('l');
37    [l,r].forEach(x=>x.disabled=true);
38    setTimeout(()=>{
39      [l,r].forEach(x=>x.disabled=false);
40      ul.classList.remove('l');
41      ul.insertBefore(ul.querySelector('li:last-child'),ul.querySelector('li'));
42    },1000);
43  });
44  r.addEventListener('click',()=>{
45    ul.classList.add('r');
46    [l,r].forEach(x=>x.disabled=true);
47    setTimeout(()=>{
48      [l,r].forEach(x=>x.disabled=false);
49      ul.classList.remove('r');
50      ul.appendChild(ul.querySelector('li'));
51    },1000);
52  });
53});
54</script>
55<ul>
56<li><img src="1.jpg" width=100 height=100></li>
57<li><img src="2.jpg" width=100 height=100></li>
58<li><img src="3.jpg" width=100 height=100></li>
59</ul>
60<input type="button" value="←" id="l">
61<input type="button" value="→" id="r">

投稿2021/09/27 01:56

yambejp

総合スコア116835

slideshowを下記のように変更したら、一応それっぽい動きになりました。

javascript
1    function slideshow(){
2        if(cnt >= 0 && cnt < len - 1) {
3            imgArray[cnt].classList.add('active');
4        }else if (cnt >= len - 1){
5            cnt = -1;
6            imgArray.forEach(img => img.classList.remove('active'));
7        }
8        cnt++;
9        setTimeout(slideshow,3000)
10    }