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

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

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

デモはこちらです。

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

1. 1．HTMLで画像（背景）の部分を作成する（CSSで整える）
2. 2.Javascriptのクリックイベントで画像URLを切り替えて表示させる

1．HTMLで画像（背景）の部分を作成する（CSSで整える）


　　　<div class ="slide-pic">
            <div id ="slide" class="slideshow">
                <p class="disc">sample</p> 
                <a class ="arrow next" id ="right" href ="#"></a>   
                <a class ="arrow back" id ="left" href ="#"></a>
            </div>
       </div>

<p class="disc">sample</p>

</div>

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

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

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

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

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


/*画像配置*/
.slideshow{
    max-width: 100%;
    height: 100%;
    background-image: url(一番初めに表示する画像のURL);/*JSで切り替える画像*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;/*左 中央のよせ*/
}

/*画像配置*/

.slideshow{

max-width: 100%;

height: 100%;

background-image: url(一番初めに表示する画像のURL);/*JSで切り替える画像*/

background-repeat: no-repeat;

background-size: cover;

background-position: 0% 50%;/*左中央のよせ*/

}

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

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

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

JSのコードです。


//画像を配列に格納
     var images =['url(画像1のURL)',
                  'url(画像2のURL)',
                  'url(画像3のURL)']

     //要素をHTMLから取得
     //画像
     var target = document.getElementById('slide');
     
     //>,<
     var right = document.getElementById('right');
     var left = document.getElementById('left');

//画像を配列に格納

var images =['url(画像1のURL)',

'url(画像2のURL)',

'url(画像3のURL)']

//要素をHTMLから取得

//画像

var target = document.getElementById('slide');

//>,<

var right = document.getElementById('right');

var left = document.getElementById('left');

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

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

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

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

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


var arr = ["a", "b", "a"];
console.log(arr);                     // => ["a", "b", "c"]
console.log(arr[0]);                  // => "a"
console.log(arr[1]);                  // => "b"
console.log(arr[2]);                  // => "c"

var arr = ["a", "b", "a"];

console.log(arr); // => ["a", "b", "c"]

console.log(arr[0]); // => "a"

console.log(arr[1]); // => "b"

console.log(arr[2]); // => "c"

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


//クリックしたときに変わるようにカウント変数
     var count = 0;
 
     //クリックしたら画像変更
    function change(){
        target.style.backgroundImage = images[count];
     }

//クリックしたときに変わるようにカウント変数

var count = 0;

//クリックしたら画像変更

function change(){

target.style.backgroundImage = images[count];

}

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

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

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

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


 function goNext(){
        if(count == 2){
            count = 0;
        }else{
            count++;
        }
        change();
    }
    
    function goBack(){
        if(count == 0){
            count = 2;
        }else{
            count--;
        }
        change();
    }

function goNext(){

if(count == 2){

count = 0;

}else{

count++;

}

change();

}

function goBack(){

if(count == 0){

count = 2;

}else{

count--;

}

change();

}

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

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


//クリックイベント
    right.addEventListener('click',goNext,false);
    left.addEventListener('click',goBack,false);

//クリックイベント

right.addEventListener('click',goNext,false);

left.addEventListener('click',goBack,false);

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

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

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


オブジェクト.addEventListener('イベント名',function(){処理内容},false)

つまり、今回に当てはめると

取得した要素.addEventListener('ckickイベント',実行関数,false)

という形で考えられます

オブジェクト.addEventListener('イベント名',function(){処理内容},false)

つまり、今回に当てはめると

取得した要素.addEventListener('ckickイベント',実行関数,false)

という形で考えられます

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

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

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

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

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

<あわせて読みたい>

このブログのJavascript関連のまとめ記事

初心者向けでわかりやすい、JavaScript勉強におすすめの学習本

プログラミング初心者だったときに、JavaScriptの学習に読んでいた本のご紹介です。初心者向けの記事です。

HTML,CSS,Javascript　スクロールしたらふわっと表示(jQueryなし）

javascriptでスクロールしたらふわっと表示させる作り方です。このままコピペしても動くと思います。 jQueryなしで作成しています。