4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-08

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**>タグで画像指定した方が良かったのでは。。と振り返って思ったりもします。

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

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?