どうも!最近カレーが3日連続続いてるむねりんです!カレー美味しいですよね。
でもちょっと炭水化物摂取しすぎで体重増えてきたので運動したいと思います。

という事でJavaScriptで簡単にスライドショーの設置する方法を解説していきます。

皆さんは絶対にサイト作成時にこんなことを思うはず・・・。

スライドショー導入したいけど難しいやろうな・・・・

あ〜ちょっとお洒落なスライドショー導入したいなぁ

結論から言うと簡単にシンプルなスライドショーを導入できます!

それでは目次の順を追って解説していきます。

「スライドショーは実装したいけど、JavaScriptの事よくわかっていないんだよね…」なんて方は以下の記事をご一読いただくとより理解が深まると思います。

スライドショーのイメージ

まず初めに皆さんはスライドショーとはどういうモノを想像していますか?
ここで少し皆さんが思うスライドショーのイメージを紹介したいと思います。

これはjQueryを用いて作成したスライドです、このようなスライドを作成したいのであればjQueryを導入した方が早く作成できるかもしれませんね。
しかし今回はJavascriptのみで作成できる簡単なスライドショーを作りたいと思います。
今回作成するスライドがこちらです。

今回は、このような開始と停止ボタン付きのスライドを作成します。
それではスライドショーの作り方へ移ります。

スライドショーの作り方

スライドショーの作り方について順を追って作成していきたいと思います。

①html準備

まずはhtml、css、jsファイルを準備して下さい。
htmlは、下記のコードになります!なお基本的なコードの説明は省略させてもらいます。

<!-- html記述 -->
<!DOCTYPE html>
<html lang ="ja">
<head>
    <meta charset="utf-8">
    <title>スライダー</title>
</head>
<body>
    <div class="sliderbox">
       <!-- ↓最初に表示させる画像↓ -->
        <img src="img/image01" id="slide"><br>
       <!-- ↓スライダーの開始・停止ボタン↓ -->
        <input type="button" value="開始/停止" id="button">
    </div>
    <!-- ↓スクリプトファイルパス↓ -->
    <script src="../js/script.js"></script>
</body>
</html>

まずbody内に一番初めに表示させたい画像を指定します。
今回はid属性をslideとbuttonとします。なおid属性はjsファイルと紐付るために必要なので覚えておきましょう!!

htmlは、これだけになります。それでは次はcssの準備に移りましょう!

②css準備

下記がcssのコードになります。それでは見ていきましょう!

/*CSS記述*/
/*画像の幅・高さ指定*/
#slide{
    width: 350px;
    height: 200px;
}

今回は、画像の幅・高さのみ指定します。背景などフォントカラーを追加したい方は要素を追加して実際にコードを書いて練習してみよう!!

それでは、次にメインのJSの説明に入ります。
皆さんついていけてますか?w
ここまででわからないことがあれば検索して調べてみることが大事です。

③Javascript準備

それでは、JSについて解説していきます。
今回は画像の処理とボタンの処理と分けて解説していきます。
まずは画像処理の下記のコードを見ていきましょう!

//↓JS記述↓
//画像6枚分
const images = ["../image/image1.jpg","../image/image2.jpg","../image/image3.jpg","../image/image4.jpg","../image/image5.jpg","../image/image6.jpg"];
//画像関数定義
//初期値
let count = 0;
//関数名設定
const slideimage =()=>{
//配列要素記述
if( count >= images.length){
    count = 0;
  }
else{
    document.getElementById('slideshow').src = images[count];
    count++;
  }
}

まず画像の方ですが6枚あるので6枚全てconst imagesで関数名を設定し中に画像を指定してあげます。
その際に1枚目は、最初にhtml内で記述した画像を選択しましょう。

次に配列要素記述ですが簡単にいうと画像をスライドする際に1枚目から6枚目まで行くとまた繰り返し戻り1枚目からスライドするという記述をしています。

それでは後ほどボタンのところで紐付けをするために今回は関数名をslideimageと設定します。
ifの記述ですがcountが画像の枚数より多ければ、countを0に戻す、要するに最後の画像までいくとまた1枚目から始まるという記述をしています。
今回はcount=0で設定していますが、6枚画像を指定しているのでcount>=6でも設定可能です。

次にelseですが最初に指定した配列画像のcount番目の画像を表示させる設定をしています。簡単にいうと配列した画像とスライドする際に表示する順番の紐付けですね。
ここで登場するcount++ですがこれは先ほど設定したcount=0から順番に1→2→3→4→5→6まで増え6枚目で最初の画像に戻るという意味を表しています。

皆さんどうでしょう?ついていけていますか?
実際に自分でわからない関数を調べたり、デモサイトなどを用いてコード記述していけば理解度が高まるのが早いかと思います!

それでは次にボタンの処理について解説していきます。
下記の記述を見ていきましょう!

//↓JS記述↓

//ボタン関数定義
//初期値
let slideid = 0;
//関数名設定
const startstop = () =>{
//開始ボタン処理
if(slideid === 0){
    slideid = setInterval(slideimage, 1000);
   }
//停止ボタン処理
else{
     clearInterval(slideid);
     slideid = 0;
   }
  }
//画像とボタンの紐付け処理
document.getElementById('button').onclick = startstop;

先ほどと流れは同じなので基本的な説明は省かせてもらいます。

この記述は簡単にいうとボタンを押すとスライド画像が開始・停止するという記述をしています。ここで重要なのがsetIntervalです。
setIntervalとは、一定時間事に特定の処理を繰り返すことを表しています。要するに画像をスライド処理する時の時間を表しています。
今回は1000で設定しています。

逆にelseで設定しいてるclearIntervalとはifで設定したslideidが0でない場合処理を停止するとい意味を表しています。

最後になりましたがdocument.getElementByIdですがこれは簡単にいうとクリックした時にbuttonで設定したstartstop関数が作動するという記述をしています。

以上でスライドの出来上がり!ということで完成形をコードペンを用いて見ていきましょう!

See the Pen 超絶簡単スライド by むねりん (@munerinnemui) on CodePen.

まとめ

今回は、簡単なスライドショーを作ってみましたがcssの方で装飾を変えたり他にもjQueryを用いることでもっと実用的でお洒落な物ができるかもしれませんね!!
ということで今回は、JS初心者が簡単なスライドショーを作ってみたでした!!ご覧いただきありがとうございます!

作者情報
大阪出身のお米よりも粉物派。 お酒飲むのとおしゃべり大好き人間です。 仕事は楽しくしようがモットー。 よろしくお願いします!