PictureタグのMax-widthが反映されない

Question

前提・実現したいこと

以下のサイトのTOP画像のように一定の時間と画面幅で画像が変わるようにしたい。
https://www.rakuten.ne.jp/gold/ight-tokyo/

発生している問題

画面幅によって画像が変わらない

該当のソースコード

  <div class="top_img" id="top_img">
                <picture class="bg ">
                    <source media="(max-width: 1024px)" srcset="image/slider03.png">
                    <source media="(max-width: 580px)" srcset="img/kv_sp_1.jpg">
                    <img src="image/slider03.png">
                </picture>
                <picture class="bg bg_dn ">
                    <source media="(max-width: 1024px)" srcset="image/download-1.jpg ">
                    <source media="(max-width: 580px)" srcset="img/kv_sp_2.jpg">
                    <img src="image/download-1.jpg ">
                </picture>
                <picture class="bg bg_dn ">
                    <source media="(max-width: 1024px)" srcset="image/download.jpg ">
                    <source media="(max-width: 580px)" srcset="img/kv_sp_3.jpg">
                    <img src="image/download.jpg ">
                </picture>


            </div>
```css

.top_img {
width: 80%;
display: block;
margin: 0 auto;
padding-top: 80px;
}

                   .top_img img {
                       width: 100%;
                       background-size: cover;
                   }
                   
                   .bg_dn {
                       display: none;
                   }

function slideshow() {
if (count % 2 == 0 && count % 3 == 2) {
$(".bg").eq(0).addClass("bg_dn");
$(".bg").eq(1).removeClass("bg_dn");

} else if (count % 2 == 0 && count % 3 == 1) {
    $(".bg").eq(1).addClass("bg_dn");
    $(".bg").eq(2).removeClass("bg_dn");

} else if (count % 2 == 0 && count % 3 == 0) {
    $(".bg").eq(2).addClass("bg_dn");
    $(".bg").eq(0).removeClass("bg_dn");

}
console.log(count);
count++;

}
setInterval(slideshow, 2000);

### 試したこと

SourceをDivでかこってClassを付け替えた→失敗

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

Pictureではなくimgタグを使いCSSでレスポンスした際は出来ました。

Answer 1

こういうことでしょうか。

source mediaを指定する順番が違うようです。

　<div class="top_img" id="top_img">
                <picture class="bg ">
                    <source media="(max-width: 580px)" srcset="img/kv_sp_1.jpg">
                    <source media="(max-width: 1024px)" srcset="image/slider03.png">
                    <img src="image/slider03.png">
                </picture>
                <picture class="bg bg_dn ">
                    <source media="(max-width: 580px)" srcset="img/kv_sp_2.jpg">
                    <source media="(max-width: 1024px)" srcset="image/download-1.jpg ">
                    <img src="image/download-1.jpg ">
                </picture>
                <picture class="bg bg_dn ">
                    <source media="(max-width: 580px)" srcset="img/kv_sp_3.jpg">
                    <source media="(max-width: 1024px)" srcset="image/download.jpg ">
                    <img src="image/download.jpg ">
                </picture>
    </div>

var count = 0;
function slideshow() {

    if (count % 2 == 0 && count % 3 == 2) {
        $(".bg").eq(0).addClass("bg_dn");
        $(".bg").eq(1).removeClass("bg_dn");
    }
    else if (count % 2 == 0 && count % 3 == 1) {
        $(".bg").eq(1).addClass("bg_dn");
        $(".bg").eq(2).removeClass("bg_dn");
    }
    else if (count % 2 == 0 && count % 3 == 0) {
        $(".bg").eq(2).addClass("bg_dn");
        $(".bg").eq(0).removeClass("bg_dn");
    }

    console.log(count);
    count = (count + 1) % 6;
}
setInterval(slideshow, 2000);

Comments

[MasayaTakashima]

Picture の中のsourceを1つにしてpicture にクラスをつけるのですね！試してみます！

[MasayaTakashima]

JSは反映されたのですがPictureの効果が反映されませんでした。

[naomi3]

ウィンドウサイズに合わせて画像が切り替わりませんか？該当のコードを質問に貼り付けてください。

[MasayaTakashima]

はい、変わらないです。今貼り付けました。

Answer 2

<source media="(max-width: 1024px)" srcset="image/slider03.png">を消したらできました。つまり580px以下の時はsorceをそれ以外(580px以上)はimgみたいな感じになりました。