はじめに
こちらは、JavaScript初心者向けのスライダー作成記事です。
スライダーとは、画像が一定時間毎に切り替わる、よく見るアレです！
今回はボタンをクリックしてスライド開始、またクリックで停止できるようなものを作成したいと思います。
以下の方を対象とさせて頂いています。
- JavaScriptの勉強を始めたばかりの方
- 一通りProgate等で基礎を学んだけれど、何か自分で作って動かしてみたい！という方
- HTML及びCSSについての基礎的な学習が済んでいる方
ぜひJavaScriptの入門とも言えるスライダー作成をしてみてください！
初心者の方でも10分〜20分ほどで出来るのではないかと思います。
説明に不十分なところがあればコメント頂ければと思います！
※説明内の各ファイル、画像へのパスは個人で変更してくださいね！
#早速実装！
①まずはHTMLファイルを作成！！
まずは下記のように下準備してください！
こちらはHTMLの基本的なコードなので説明省略します。
scriptタグ内にはご自身で準備したjsファイルへのパスを入力してください。
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset = "utf-8">
<title>スライダー</title>
</head>
<body>
<!-- この中に後ほど追記していきます！ -->
<script src = "../js/chenge_image.js"></script>
</body>
</html>
次にbodyタグの中に記述していきます。
１番最初に表示させる画像と、スライド開始ボタンを設置していきます。
コーディング前に好きな画像4〜６枚ほど保存しておきましょう！
画像の準備ができたらbodyタグの中に以下を記述します！
<body>
<div class="sliderbox">
<!-- ▼最初に表示させる画像 -->
<img src="../image/image1.jpg" id="slideshow"><br>
<!-- ▼スライダーの開始・停止ボタン -->
<input type="button" value="開始／停止" id="startstopbtn">
</div>
</body>
少し詳しく解説します。
<img src="../image/image1.jpg" id="slideshow">
こちらは初期画像の記述です。JSと紐づけるためにはid設定が必要なのでid= "slideshow"と名付けています。
<input type="button" value="開始／停止" id="startstopbtn">
こちらはスライダーの開始停止ボタンです。valueの値はお好きに変更してください。
こちらもJSと紐づけるためにid設定しています。
以上でHTML記述は終了です！この時点でブラウザで確認してみると、
こんな感じで、初期画像と、その下にボタンが表示されているかと思います。
（ブラウザで確認するには、htmlファイルをブラウザにドラッグ＆ドロップですよ！）
②CSSファイルで画像の大きさ設定！
#slideshow{
width:400px;
height:250px;
}
CSSはご自身でお好きに設定してください！
今回のメインではないので省略します。
③いよいよJSファイルを作成！
まずは用意した画像をそれぞれ配列に入れて、定数定義します。
const images = ["../image/image1.jpg","../image/image2.jpg","../image/image3.jpg","../image/image4.jpg","../image/image5.jpg","../image/image6.jpg"];
htmlに記述した初期設定の画像も忘れずに！
私はimage1-image6までの６枚の画像を配列に入れました。
そして定数imagesに代入しています。
配列の中身は今後も変わることはないので、変数letではなく定数constで定義します。
では次にスライドの動作を表す関数を定義します。
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++;
}
}
まずは定数countを定義し、初期値に0を設定しましょう。
次に関数名をslideimageで定義し、内容を{}内に記述します。
今回の内容は、
もし(if)、countが画像の枚数より多ければ、変数countを0に戻す ----❶
そうでなければ(else)、最初に定義した配列imagesの"count"番目の画像を表示させる。 ---❷
という内容になります。
❶の内容が以下の部分
if( count >= images.length){
count = 0;
}
images.lengthは、配列の要素数を取得する記述ですね。
ちなみに直接画像枚数を入れても良いです。
つまり、count >= 6 でもOKです！
そして❷の内容が以下です。
else{
document.getElementById('slideshow').src = images[count];
count++;
}
document.getElementById('slideshow')で、htmlファイルのimgタグで設定したid,slideshowを取得しています。
それの.srcで画像を指定し、＝の右辺で新しい画像を設定しています。
images[count]の部分がそれですね。
imagesはJSファイルの１行目で設定した画像の配列の定数名です。
配列を取り出す際には**配列名[番号]**で取り出せます。
今回の配列名がimages、番号は変数countです。
配列の最初の要素を取り出す際は１ではなく０から始まるので、countの初期値が０なんですね。
そして1行下のcount++で、countの数を１ずつ増やしています。
先ほどcountが０だったので次は１、その次は２、３、４、５まで増えます。
そして６になった時点でif文の最初の条件(count >= 6)に引っかかるので、
countが0に戻される。つまり最初の画像に戻るということです。
どうでしょうか？ここまで来たらあと少しです！
このままではスライドの動作設定はしたものの、動作させる為の記述がないのでまだ動きません。
次にその設定、つまりボタンクリック時の設定をしていきます！
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++;
}
}
// 以下を追記してください！
let slideid = 0;
const startstop = () =>{
if(slideid === 0){//開始ボタンを押した時の処理内容
slideid = setInterval(slideimage, 1000);
}else{ //停止ボタンを押した時の処理内容
clearInterval(slideid);
slideid = 0;
}
}
document.getElementById('startstopbtn').onclick = startstop;
では順番に解説していきます！
まずsetIntervalメソッドはご存知でしょうか？
setIntervalはJSの頻出メソッドで、一定時間ごとに特定の処理を繰り返します。
setInterval(第一引数,第二引数)という形で記述します。
第一引数には、動作させる関数名が入ります。今回だと先ほど設定したslideimageですね！
第二引数には、第一引数の関数をどの時間ごとに動作させるか、の時間を入れます。
今回は1000で設定しています。(単位はmsです)
そしてsetIntervalは返り値としてidを返してくれる特徴があります。
今回はそのidをslideidに代入しています。
そしてelse文の中のclearIntervalの引数でslideidを設定することにより、
slideidが０でない場合にはこの繰り返し処理をやめるという設定をしています。
そしてその後でまたslideidを初期値の0に戻しています。
document.getElementById('startstopbtn').onclick = startstop;
最後のこちらの行は、
document.getElementById('startstopbtn')でhtmlファイルで設定したボタンのidと紐づけています。
そしてそれが.onclick、つまりボタンがクリックされた時に、startstop関数が作動するという記述です。
最初にclickされた時、つまり開始時は、初期値は0なので
if(slideid === 0){//開始ボタンを押した時の処理内容
slideid = setInterval(slideimage, 1000);
}
この部分が動きます。
この間はslideimage関数は1000ms毎に動作されています。
つまり1000ms毎にcountが１ずつ増えて画像も切り替わります。
しかし次にボタンが押された時は、停止処理を意味しますので
else{ //停止ボタンを押した時の処理内容
clearInterval(slideid);
slideid = 0;
}
の部分が動作します。
開始ボタンを押した時点でslideIdは０ではなくなる為、次にボタンを押した時にはelse以下が走るわけですね。
以上で簡単ではありますが、スライダーの出来上がりです！
ブラウザを更新して確認してみてください！
うまく動きましたでしょうか？？
JS初心者の方はこのレベルからトライすると楽で良いかと思います！
ご覧いただきありがとうございました(^^)