JSの勉強を兼ねて、JQueryを使わずにJSとCSSで背景画像のスライドショーを作成しました。
※まだまだ勉強中なのでミス等あればコメントで教えていただければありがたいです。
結果
まずは結果を表示します。こんな感じに仕上がりました。
See the Pen slideshow by RS (@shimamar) on CodePen.
コード
コードを記載します。処理に直接関係ないところは省略しております。
test.html
<divid="slideshow"><h1>Hello!</h1></div>test.css
div{height:300px;width:500px;transition:background-image2.5Sease;/*背景画像をゆっくり変化させる*/background-image:url("最初に表示する画像パス");}h1{font-size:30px;color:white;text-align:center;line-height:300px;}test.js
//スライドショー で表示させる画像パスを変数に格納varsetImage=["画像01パス","画像02パス","画像03パス"];//カウンターの初期値設定varcounter=0;//設定した画像パスをid="slideshow"のbackground-imageに設定する、繰り返すfunctionslideimage(){//カウンターが設定画像数より大きいか確認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>タグで画像指定した方が良かったのでは。。と振り返って思ったりもします。
まだまだ納得のいかない・わからないところもあるので、勉強を重ねてバージョンアップできればと思います。