javascriptでボタン付きスライドを作成する(jQueryなし)

javascriptでボタン付きスライドを作成する(jQueryなし)

 

今回はJQueryなしで、画像のスライドを作った備忘録です。

実は結構躓きました・・・

 

デモはこちらです。

※画像読み込みに時間がかかるかもしれません。何度か矢印をクリックするとスムーズに動きます。

まずは、背景に画像を設定するための、<div id =”slide” class=”slideshow”>を作成。

ここに、後程CSSで背景画像の設定をします。(下記のCSSのところで記載してます)

a タグ は、スライドボタンの > < を表示するために作成してます。

(デザインはCSSで指定していますが、ここでは説明しないため、デモのコードを参照ください。)

 

CSSはJSに関係ある画像配置のところだけ抜粋します。

.slideshowにbackground-image: url(一番初めに表示する画像のURL);を記入し、初めに表示する画像を設定します。

このbackground-imageのURLをJS操作して切り替えていきます。

 

2.Javascriptのクリックイベントで画像URLを切り替えて表示させる

JSのコードです。

まず、スライドさせたい画像をimagesの配列に格納します。

背景画像の変更をJSで操作したいので、背景画像を設定したidを取得してtargetに格納します。このidのstyleを変更していく形です。

ボタンをクリックしたら動くようにしたいので、イベントリスナーに使用するため、><のidを取得して格納しておきます。(right,left)

このimagesを順番にクリックイベントで表示していく形にしています。

配列の説明はこちらを参考にさせていただきました。

上のサンプルの arrがimagesで、[0]が[count]として今回作成してます。

 

countで画像の配列の値を指定できるように、初期値で0を入れておきます。

function change()を作成し、この関数を実行したら、backgroundImageを、imagesに格納したURLに変更します。

(target.style.backgroundImage = images[count];のところです)

imagesにはURLが複数入っているので、[count]の値(0,1,2・・・)で引きだすURLを変更できます。

 

goNextは>を押した場合、もしimagesの[count]の値が最後(ここでは2)ならば最初(0)に戻し、そうでないならcountに+1ずつプラスし、cange()関数を実行する。

goBackは<の場合で、逆に減らす形です。

 

><を取得している変数(right,left)にクリックイベントを追加します。

クリックしたら、goNext,goBackを実行して、URLを変更します。

addEventListenerについてはこんな感じで覚えました。

 

これで一通りは動くようになりました。

実は最初に作ったときにエラーで動かなかったことがあったのですが、それはHTMLを読み込む前にJSを実行してしまっていました・・・

解決策としてwindow.onload = function(){ でくくったらエラーが消えました。

全体のコードはデモ画面に記載があるので、参考までにご覧ください。

もっと他にい方法もあると思いますが、今回の備忘録として残しておきます。

<あわせて読みたい>