今回のスライドショーでは、次へ、前へボタンをクリックせれたら配列に登録されているimgを切り替える。今何枚目の画像をみているのかわかるようにする。
<div class="slide">
<div class="image_box">
<img id="main_image" src="images/image1.jpg">
</div>
<div class="toolbar">
<div class="nav">
<div id="prev"></div>
<div id="page"></div>
<div id="next"></div>
</div>
</div>
</div>
image_boxにimgの id=main_iamdeをセットします。これは、スライドの一番最初の画像になります。
さらに、ツールバーの中は今回はスライドショーを操作するためのツールです。上から前へ、ページ数、次へのボタンになります。
const images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg', 'images/image4.jpg', 'images/image5.jpg'];
let current = 0;
function changeImage(num) {
if(current + num >= 0 && current + num < images.length) {
current += num;
document.getElementById('main_image').src = images[current];
pageNum();
}
};
function pageNum() {
document.getElementById('page').textContent = `${current + 1}/${images.length}`;
}
pageNum();
document.getElementById('prev').onclick = function() {
changeImage(-1);
};
document.getElementById('next').onclick = function() {
changeImage(1);
};
まず、プログラムの冒頭で、配列を定数imagesに代入します。
変数currentに０を代入します。なぜ代入するかというと、今何枚目の画像にいるのかをを保存するために使います。ボタンクリックのときに
呼び出されるchangeImage関数についてみていきます。 ボタンをクリックされたときに渡される値をパラメータとしてnumを渡します。パラメータの名前は自由にセットすることができます。
次のif文では、最初の条件式にcurent + num があります。これは、前の変数currentで0を保存していました。
次へボタンの1がパラメータとして入ってきた場合、0+1で1になります。 &&(かつ) current + numよりもimages.length(データの項目数) &&（かつ）の場合は、どちらか一方でもtrueならプログラムは読み進められます。
読み進められた後の処理は、current += num;▶0+1になります。(a+bしてaに代入)
そして、次の行ではHTMLでid main_imageを設定したので、取得します。document.getElementByIdで取得。.属性(src)= 値、配列imagesのcurrent番目のデータ(images[current])
pageNumの関数処理
id pageを取得します。＝の右側のソースは、テンプレート文字列を使用します。
{current + 1}▶現在表示しているページになります。currentには、配列imagesから特定の項目を読み取るために使用していました。
なので、0~4が入るはずですが、感覚的に気持ち悪いので今回は+1にします。{images.length}は画像の点数になります。
それでは、最後の次へクリックされたときの関数です。
HTMLがわでセットしたid属性prev,nextを取得します。
changeImageを呼び出してパラメータとして(-1,+1)をそれぞれパラメータとしてセットします。