画像の透過度変化をを用いたスライドショーの実行

Javascript及びHTML,CSSに関する質問です。
画像(透過度0)がいくつか入ったクラスに対し、それらの透過度を1にするクラスを付け加えていくことで表示させる画像を変化させていきたいのですがうまくいきません。
該当箇所を貼らせていただきます。

HTML
1<link rel="stylesheet" href="style.css">
2<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
3
4<div id="slideshow" class="slideshow">
5    <img src="gazou/thema1.jpg" width="1000" height="600" alt="">
6    <img src="gazou/thema2.jpg" width="1000" height="600" alt="">
7    <img src="gazou/thema3.jpg" width="1000" height="600" alt="">
8</div>
9<script type="text/javascript" src="slideshow.js"></script>

CSS
1.slideshow{
2    position:relative;
3    width: 640px;
4    height: 480px;
5}
6.slideshow img{
7    position:absolute;
8    transition: 1s;
9    opacity: 0;
10}
11.slideshow.show{
12    opacity: 1;
13    z-index: 1;
14}

javascript
1$(function() {
2    var img = $("#slideshow").children("img"),
3        num = img.length,
4        count = 0,
5        interval = 5000;
6    img.eq(0).addClass("show");
7
8    function slide() {
9        img.eq(count).removeClass("show");
10        count++;
11        if(count >= num) {
12            count = 0;
13        }
14        img.eq(count).addClass("show");
15        setTimeout(slide, interval);
16    }
17    setTimeout(slide, interval);
18});

以上のコードを実行すると透過度が変化しないままになります。
setTimeout関数がうまく実行されていないのかと思い錯誤してみたのですが解決方法が分かりませんでした。解決方法や文法ミスなどのご指摘、よろしくお願いいたします。

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

回答1件

ベストアンサー

CSSとJavaScriptを少し編集すると動くと思います。

JavaScriptのコードを見ると、.slideshowの子要素のimgタグに.showクラスをつけて表示を切り替えようとしているので、CSSのコードで.showクラスのセレクタを修正しました。
具体的には、.slideshowの子要素の.showクラスにスタイルが当たるようにしました。
ref: 子孫結合子 - CSSカスケーディングスタイルシート MDN

css
1.slideshow{
2    position:relative;
3    width: 640px;
4    height: 480px;
5}
6.slideshow img{
7    position:absolute;
8    transition: 1s;
9    opacity: 0;
10}
11.slideshow .show{ /* .slideshow のあとに空白を入れました */
12    opacity: 1;
13    z-index: 1;
14}

また、JavaScriptでsettimeoutを2回使用していたので、最初の関数の実行時はシンプルにslide関数を呼ぶようにしました。
また、1枚目の画像を最初に表示するために、classの付替えをするコードを少し修正しました。

js
1$(function() {
2    var img = $("#slideshow").children("img"),
3        num = img.length,
4        count = 0,
5        interval = 5000;
6
7    function slide() {
8        img.removeClass("show"); // showクラスを削除
9        if(count >= num) {
10            count = 0;
11        }
12        img.eq(count).addClass("show");
13        count++; // count の位置を移動
14        setTimeout(slide, interval);
15    }
16    slide(); // この行を修正しました。
17});