【jQuery】スライドショーがうまくできない

前提・実現したいこと

プラグインを使わずにスライドショーを実装しようとしています

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

参考サイト通りにコードを書いてもうまく動作しません
1枚目、2枚目はスライドショーになるのですが、2枚目で止まってしまってそれ以降スライドショーになってくれないです
参考サイト：https://www.fenet.jp/dotnet/column/tool/4729/#i-2

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width">
6    <title>repl.it</title>
7    <link href="style.css" rel="stylesheet" type="text/css" />
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9</head>
10<body>
11<script type="text/javascript" src="script.js"></script>
12    <div id="slide" class="slide">
13        <!--画像を用意-->
14        <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_1280.jpg" width="720" height="460"/>
15        <img src="https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_1280.jpg" width="720" height="460"/>
16        <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_1280.jpg" width="720" height="460"/>
17        <img src="https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_1280.jpg" width="720" height="460"/>
18    </div>
19</body>
20</html>

CSS
1.slide {
2    position: relative; /* 親要素にrelativeを指定 */
3}
4    
5.slide img {
6position: absolute; /* absoluteで画像を重ねる */
7display: none; /* 画像を非表示に非表示 */
8}

js
1$(function() {
2 $('.slide').each(function() {
3   // スライド（画像）の数を取得
4   var $slides = $(this).find('img'),
5       slideNum = $slides.length,
6       currentIdx = 0; // 何番目か
7 
8   // 最初の画像をフェードイン
9   $(".slide img").eq(currentIdx).fadeIn();
10 
11   // 3秒後に次のスライドを表示
12   setTimeout(dispNextSlide, 3000);
13 
14   // 次のスライドを表示するメソッド
15   function dispNextSlide() {
16     var nextIdx = currentIdx + 1;
17 
18     // 最後のスライドの場合ははじめに戻る
19     if (nextIdx > (slideNum - 1)) {
20       nextIdx = 0
21     }
22 
23     // 現在のスライドをフェードアウト
24     $(".slide img").eq(currentIdx).fadeOut();
25 
26     // 次のスライドをフェードイン
27     $(".slide img").eq(nextIdx).fadeIn();
28 
29     // インデックスを更新
30     currentIdx = nextIdx;
31   }
32 })
33})

初学者であまりJavaScriptやjQueryの知識がなくなぜうまくいかないのかがわかっていません。
初歩的なことになってしまうと思うのですがよろしくお願いします。

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

回答1件

ベストアンサー

setTimeout(dispNextSlide, 3000);
3秒後に一回だけ処理をしてね。と書いてあるからですかね。

setInterval(dispNextSlide, 3000);
こっちの記述にすると3秒毎に繰り返してね。という意味になります。

ついでにちょこっとコードを弄ってしまいました。

javascript
1$(function() {
2   // スライド（画像）の数を取得
3   var slideNum = $('.slide').find('img').length,
4       currentIdx = 0; // 何番目か
5
6   // 最初の画像をフェードイン
7   $(".slide img").eq(currentIdx).fadeIn();
8
9   // 次のスライドを表示するメソッド
10   function dispNextSlide() {
11     var nextIdx = currentIdx + 1;
12
13     // 最後のスライドの場合ははじめに戻る
14     if (nextIdx > (slideNum - 1)) {
15       nextIdx = 0
16     }
17
18     // 現在のスライドをフェードアウト
19     $(".slide img").eq(currentIdx).fadeOut();
20
21     // 次のスライドをフェードイン
22     $(".slide img").eq(nextIdx).fadeIn();
23
24     // インデックスを更新
25     currentIdx = nextIdx;
26   }
27
28   // 3秒刻み次のスライドを表示
29   setInterval(dispNextSlide, 3000);
30})