JQueryを使わずjsとcssを使って背景画像のスライドショー 作成

JSの勉強を兼ねて、JQueryを使わずにJSとCSSで背景画像のスライドショーを作成しました。
※まだまだ勉強中なのでミス等あればコメントで教えていただければありがたいです。

結果

まずは結果を表示します。こんな感じに仕上がりました。

See the Pen slideshow by RS (@shimamar) on CodePen.

コード

コードを記載します。処理に直接関係ないところは省略しております。

test.html

<div id="slideshow">
  <h1>Hello!</h1>
</div>

test.css

div{
  height: 300px;
  width: 500px;
  transition: background-image 2.5S ease; /*背景画像をゆっくり変化させる*/
  background-image: url("最初に表示する画像パス");
}

h1{
  font-size: 30px;
  color: white;
  text-align: center;
  line-height: 300px;
}

test.js

//スライドショー で表示させる画像パスを変数に格納
var setImage = [
  "画像01パス",
  "画像02パス",
  "画像03パス"];

//カウンターの初期値設定
var counter = 0;

//設定した画像パスをid="slideshow"のbackground-imageに設定する、繰り返す
function slideimage(){
    //カウンターが設定画像数より大きいか確認
    if( counter >= (setImage.length-1)){
        //カウンターを初期値に戻す
        counter = 0;
    }
    //背景画像を設定
    document.getElementById( "slideshow" ).style.backgroundImage = "url(" + setImage[counter] + ")";
    //カウントアップ
    counter++;
}

//3秒ごとに背景画像を切り替える
setInterval("slideimage()",3000);

ポイント

cssの transition プロパティの設定時間を
JSの　setInterval の設定時間より短くしたこと

同じにしてしまうとタイミングが重なってしまうせいなのか、
transition プロパティがうまく効かずにはっきりと切り替わりが起こってしまいます。

//JS
setInterval("slideimage()",3000); //3秒

//css
transition: background-image 2.5S ease; //2.5秒

まとめ

ネットで検索するとスライドショー の作成方法はたくさん出てくるのですが主にJQueryで作成されている方が多く、自分の基礎勉強のためにもJSで実装してみました。

ただ、ゆっくり表示させるところがなかなかうまくいかず苦戦しました。
そして background-image プロパティでは無く <img>タグで画像指定した方が良かったのでは。。と振り返って思ったりもします。

まだまだ納得のいかない・わからないところもあるので、勉強を重ねてバージョンアップできればと思います。