背景画像のスライドショーを作成したいです

実現したいこと

背景画像の自動スライドショーをJavaScriptで作成したいです。

前提

一枚目の画像が表示された後、一枚目の画像が消えた後何も表示されないままになってしまいます。

該当のソースコード

HTML
<body>

  <header>

    <nav class="g-navi">

      <div class="nav-wrapper">

        <div class="logo">
          <img class="header-logo" src="./images/logo/icon.png" alt="logo">
        </div>
        <ul>
          <li class="nav-item"><a href="#concept">#</a></li>
          <li class="nav-item"><a href="#feature">#</a></li>
          <li class="nav-item"><a href="#lineup">#</a></li>
          <li class="nav-item"><a href="#store">#</a></li>
        </ul>

      </div>

    </nav>



    <nav class="g-navi-sp">

      <div class="sp-logo">
        <img class="sp-img" src="./images/logo/icon.png" alt="logo">
      </div>

      <div class="menu-trigger">
        <span></span>
        <span></span>
        <span></span>
      </div>

    </nav>
  </header>


  <div id="slideshow">

  </div>





CSS
#slideshow {
    width: 100vw;
    height: 100vh;
    background-image: url("../images/mv/mv1.jpg");
}



JAVASCRIPT

var setImage = [
  "../images/mv/mv1.jpg",
  "../images/mv/mv2.jpg",
  "../images/mv/mv3.jpg"];


var counter = 0;


function slideimage() {

  if (counter >= (setImage.length - 1)) {

    counter = 0;
  }

  document.getElementById("slideshow").style.backgroundImage = "url(" + setImage[counter] + ")";

  counter++;
}

setInterval("slideimage()", 1000);

int32_t

2023/04/24 02:11

> 一枚目の画像が表示された後、一枚目の画像が消えた後何も表示されないままになってしまいます。この状態になったときに、ブラウザの開発者ツールを開いて * コンソールに何かエラーが出ていないか * Elements タブで <div id="slideshow"> にどのような style 属性が付いているかをチェックしてください。

fsdfsa

2023/04/24 02:42

コメントありがとうございます。 ①コンソールに何かエラーが出ていないか Not allowed to load local resource: と記載されています。 ②Elements タブで <div id="slideshow"> にどのような style 属性が付いているか <div id="slideshow" style="background-image: url("../images/mv/mv2.jpg");"> このようになっています。

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

回答2件

ベストアンサー

js
1var setImage = [
2  "../images/mv/mv1.jpg",
3  "../images/mv/mv2.jpg",
4  "../images/mv/mv3.jpg"];

相対パスが間違っているんじゃないでしょうか。見ているHTMLファイルと同じディレクトリに images/ ディレクトリがあるなら、ここはすべて "./images/mv/〜 です。
スタイルシート内で書く場合はスタイルシートからの相対パス、この場合はHTMLファイルからの相対パスです。

投稿2023/04/24 02:55

編集2023/04/24 02:56

int32_t

総合スコア21929

fsdfsa

2023/04/24 03:00

ご回答ありがとうございます。すごく初歩的なミスでした、、、

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

最初に表示されているのですから、次の画像はカウントアップしてすぐ表示してください

javascript
1<style>
2#slideshow {
3    width: 100vw;
4    height: 100vh;
5    background-image: url("https://placehold.jp/ff0000/00000/100x100.png?text=1");
6}
7</style>
8<script>
9const setImage = [
10"https://placehold.jp/ff0000/00000/100x100.png?text=1",
11"https://placehold.jp/00ff00/00000/100x100.png?text=2",
12"https://placehold.jp/0000ff/00000/100x100.png?text=3",
13  ];
14let counter = 0;
15const slideimage=()=>{
16  counter++;
17  if (counter >= setImage.length) counter = 0;
18  slideshow.style.backgroundImage = "url(" + setImage[counter] + ")";
19}
20window.addEventListener('DOMContentLoaded', ()=>{
21  setInterval(slideimage, 1000);
22});
23</script>
24<div id="slideshow"></div>