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

はじめに

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

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

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

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が出来上がります。

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

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

今回の全ソースサンプル

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

最後に

いかがでしたでしょうか。
ライブラリをうまく使うのも良いですが、background-imageに設定した画像をスライドショーで表現したい場合は、参考にしてみてください。