今回はホームページに載せるためにJQuery等用いずHTML、javascriptのみで作ったスライドショーについての自分で見直す用のメモになります。使いたい人はいないと思いますが、もし使いたい方いましたら是非一部でもコピペして使ってくださいね👼

ボタン式スライドショー

⬆このようなクリック式スライドショーになります。

HTML＋JavaScriptで作っています。

まずはHTMLのソースコードです。

＜p style="width:300px; background-color:#f5f5f5;position:relative"＞

＜img id="slide_image_name" src="http://younaship.com/img/sample_slider_image/s_0.png" style="width:240px;height:300px;margin: 10px 30px;"＞
＜input id="slide_side_button" type="button" value="←" onclick="change_slide('slide_image_name"',-1)" ＞
＜input id="slide_side_button" type="button" value="→" onclick="change_slide('slide_image_name"',1)" ＞

＜/p＞

※CSSで整形して使用してください。

次はJavascriptの部分です。

const SLIDE_PIC_PATH = "FolderPath/"; //画像が保存されてるフォルダーのパスを入力
const MAX_INDEX_SIZE = 3 // 最大移動インデックス数。これより大きくなった場合0に戻します。4枚の画像をループさせたい場合、3を指定します。
var slideCountList = [];

function change_slide(slide_id, change_count) {
 if (findIndexByName(slide_id) == -1) {
  console.log("Not Found.");
  let obj = new Object();
  obj.id = slide_id;
  obj.cnt = 0;
  slideCountList.push(obj);
 }
 slideCountList[findIndexByName(slide_id)].cnt += change_count;

 if (slideCountList[findIndexByName(slide_id)].cnt < 0) {
  slideCountList[findIndexByName(slide_id)].cnt = MAX_INDEX_SIZE; // カウンターループ１
 }
 if (slideCountList[findIndexByName(slide_id)].cnt > MAX_INDEX_SIZE){
  slideCountList[findIndexByName(slide_id)].cnt = 0; // カウンターループ２
 }
 const imgPath = SLIDE_PIC_PATH + slide_id + "_" + 
 slideCountList[findIndexByName(slide_id)].cnt + ".png";
 document.getElementById(slide_id).src = imgPath;
}

function findIndexByName(name) {
 let find_sw = -1;
 for (i in slideCountList) {
  if (slideCountList[i].id == name) {
   find_sw = i;
   break;
  } 
 }
 return find_sw;
}

使い方

スライドショーに入れたい画像を複数枚用意し、名前を「オリジナルの名前_○」でひとつのフォルダーに保存します。※○には番号(0,1,2)と振ります。

Javascriptのソースコードの定数「SLIDE_PIC_PATH」をスライド画像の保存されてるフォルダーまでのパスを入力してください。(例 http://younaship.com/img/)

定数「MAX_INDEX_SIZE 」を表示させたいスライドの画像の枚数を入力してください。※(インデックス数なので 枚数 – 1 )

HTMLでボタン、画像を配置して終了です。

⚠このスクリプトではボタンを押される事に画像を呼び出しているので画像サイズが大きい場合、表示にかなり時間がかかる場合があります。

仕組み

仕組みとしてはHTML上でボタンを配置し、onClick属性を付けることで押された時にJavascriptのchange_slide()を呼び出しています。

change_slide()は「変更する画像のID名 及び 画像のファイル名」「移動ページ数」を引数と取っています。

この例では、移動ページ数は左ボタンに-1、右ボタンに1を振ることでページ移動をさせています。

この関数が呼び出されるたびインデックスの数を上下させ対応する画像をdocument.write()で書き換えています。また、スライドショーが複数ある場合を推定して表示中のインデックスを保存する配列を用意してます。

応用

応用例としてこのスライドを自動で動くようにしてみたいと思います。

setInterval()を用いて一定時間ごとにchange_slide()を呼び出すことによりボタンをクリックしなくても自動で動くスライドにチェンジすることもできます。

⬆イメージとしてはこんな感じです。
この場合1000ms(1秒)ごとに次の画像を呼び出しています。

このように応用させて使ってもらうのが一番実用性あるかもしれません＾＾

読んでいただきありがとうございました♪

＜メモここまで＞