[javascript入門] jQueryプライグインを利用しないで簡単にbackground-imageのスライドショーを作成する方法

2022-05-23

はじめに

現在ではスライドショーを作るjavascriptライブラリは数多くあります。今回は、javascriptを使ってbackground-imageに設定した画像をスライドショーで表示する方法を紹介します。

background-imageをスライドショーで表示する

事前準備として、HTMLに下記を用意しておきます。

<div class="slideshow"></div>

CSSも用意しておきましょう。
今回は画面いっぱいに表示するので、下記のようなCSSを用意してみます。

.slideshow{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1 ;
}
.slideshow div{
    width: 100%;
    height:100%;
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 3s;
}
.slideshow div.change{
    opacity: 1;
}

事前準備が完了したら、まずはbackground-imageに設定する画像をjavascriptで設定します。
ここでは、001.png〜005.pngを用意して「.slideshow」クラスの子要素に設定します。

const setDivs = () => {
  for(let i = 1; i <= 5; i++) {
        const div = document.createElement('div');
        div.style.backgroundImage = `url(https://feeld-uni.com/xxxxxx/00${i}.png)`;
        i === 1 && div.classList.add('change');
        document.querySelector('.slideshow').appendChild(div);
  };
};
setDivs();

次は、実際のスライドショーの動きをjavascriptで表現します。
「setInterval」メソッドを利用して一定間隔で繰り返し処理を実施します。ここでは5000ms（5秒）でdiv要素の画像を削除→追加を繰り返しています。

const divs = document.querySelectorAll('.slideshow div');
let a = 1
const slideshow = () => {
  setInterval(() => {
        a++ 
        const div = document.querySelector('.slideshow .change');
        div.classList.remove('change');
        if(a < divs.length) {
          div.nextElementSibling.classList.add('change');
        } else {
          divs[0].classList.add('change');
          a = 1
        }
  }, 5000);
};
slideshow();

上記を実際公開すると、下記のようなHTMLが出来上がります。

<div class="slideshow">
    <div class="" style="background-image: url('https://feeld-uni.com/xxxxxx/001.png');"></div>
    <div class="change" style="background-image: url('https://feeld-uni.com/xxxxxx/002.png');"></div>
    <div class="" style="background-image: url('https://feeld-uni.com/xxxxxx/003.png');"></div>
    <div class="" style="background-image: url('https://feeld-uni.com/xxxxxx/003.png');"></div>
    <div class="" style="background-image: url('https://feeld-uni.com/xxxxxx/004.png');"></div>
</div>

時間経過ごとに「calss="change"」が削除→追加される動きを永遠と行います。

こうすることで、cssに設定した内容が反映されていくということです。

今回の全ソースサンプル

作成したソースは下記のような感じです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sample006 - スライドショー</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="html5reset.css">
    <style>
      .slideshow{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:-1 ;
      }
      .slideshow div{
        width: 100%;
        height:100%;
        position: absolute;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 3s;
      }
      .slideshow div.change{
        opacity: 1;
      }
    </style>
  </head>
<body>
  <div class="slideshow"></div>
  <script>
    const setDivs = () => {
      for(let i = 1; i <= 5; i++) {
        const div = document.createElement('div');
        div.style.backgroundImage = `url(https://feeld-uni.com/xxxxx/00${i}.png)`;
        i === 1 && div.classList.add('change');
        document.querySelector('.slideshow').appendChild(div);
      }
    }
    setDivs();
    const divs = document.querySelectorAll('.slideshow div');
    let a = 1
    const slideshow = () => {
      setInterval(() => {
        a++ 
        const div = document.querySelector('.slideshow .change');
        div.classList.remove('change');
        if(a < divs.length) {
          div.nextElementSibling.classList.add('change');
        } else {
          divs[0].classList.add('change');
          a = 1
        }
      }, 5000);
    };
    slideshow();
  </script>
</body>
</html>