ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【Javascript】フェイドイン・アウトするスライダー


slide

目標

  1. 複数の画像をフェイドイン、アウトして切り替えていく
  2. 読み込んだ時、画像をランダムに表示
  3. ボタンを押すと特定の画像を表示
  4. 画像の切り替えに合わせてボタンも切り替わる

実装

  1. 2枚の画像を重ねることで対応。z-indexとopacityをタイマー処理で増減して、画像が見えなくなった時に切り替えるようにしました。
  2. random関数で画像を指定して開くたびに違う画像が表示されるようにしました。
  3. ボタンを連打してもタイマー処理が重ならないように制作しました。
    ボタンでの切り替えはクリックイベントで画像を2枚とも現在の画像にして、背面の画像を切り替え、上に表示されている画像をフェイドアウトして下の画像を表示させています。
  4. 変数をカウントさせて、それぞれのボタンも切り替わるようにしました。

反省、改善点

  • 最初の2枚の画像を読み込むタイミングをずらせば軽くなるかもしれない。
  • ボタンを押した時にフェイドアウトする関数とタイマーでフェイドアウトする関数が被ってしまうので一つの関数でまとめられるようにする。
  • ボタン一つ一つにイベントを付与する時、ループでは引数をうまく渡せなかったので、その点を工夫してまとめてforループで書けるようにする。
  • CMS化して、アップロードされた画像の枚数に応じて機能するようにしたい。

コード

html

<div id="slider">
<img src="#" id="slide1">
<img src="#" id="slide2">
</div><!--/#slider-->
<ul id="slide_menu">
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
</ul>

css

html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
}
img{
	vertical-align: bottom;
}
/*body*/
body{
}

javascript

/*#slider*/
/*DOMを変数に格納*/
var slide1 = document.getElementById('slide1');
var slide2 = document.getElementById('slide2');
var slide_menu = document.getElementById('slide_menu');
/*変数を初期化*/
var opacity = 0;
var t_id = null;
var f_id = null;
var btn_f_id = null;
var s_id = 1;
var count = 0;
var opacity = 1;
var slide_count = 0;
var btn_count = 0;

/*画像の名前をimg_arrに格納*/
var img_arr = ['slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg','slide5.jpg'];

/*5秒カウント*/
function timer(){
    /*カウント*/
    count++
    t_id = setTimeout(timer,1000);
    /*7秒経過したら*/
    if(count == 7){
        slide_count++
        if(slide_count == 5){
            slide_count = 0;
        }
        f_out();
        btn_change(btn_count);
    }
    if(count == 14){
    /*14秒経過したら*/
        count = 0;
        slide1.style.zIndex = 200;
        slide2.style.zIndex = 100;
        f_in();
        btn_change(btn_count);
    }
}
timer();
function s_id_change(num){
    s_id = num;
}

/*slide_menuの中のliをslide_btnに格納*/
var slide_btn = [];
for(var i = 0; i < slide_menu.children.length;i++){
    slide_btn[i] = slide_menu.children[i];
}

/*slide_btnにクリックイベントを付ける*/
slide_btn[0].addEventListener('click',function(){click(0)},false);
slide_btn[1].addEventListener('click',function(){click(1)},false);
slide_btn[2].addEventListener('click',function(){click(2)},false);
slide_btn[3].addEventListener('click',function(){click(3)},false);
slide_btn[4].addEventListener('click',function(){click(4)},false);
/*クリックイベント*/
function click(btn_num){
    /*btn_f_out()が終わるまで押せない*/
    if(btn_f_id === null){
        btn_opacity(btn_num);
        /*カウントを止める*/
        clearTimeout(t_id);
        if(s_id == 0){
            /*slide1が非表示なら*/
            slide1.src = slide2.src;
        }else if(s_id == 1){
            /*slide2が非表示なら*/
            slide2.src = slide1.src;
        }
        slide1.style.zIndex = 200;
        slide2.style.zIndex = 100;
        slide2.src = 'img/' + img_arr[btn_num];
        opacity = 1;
        s_id = 0;
        btn_f_out();
    }
}

function btn_f_out(){
    s_id = 0;
    if(opacity > 0 ){
        opacity -= 0.01
        slide1.style.opacity = opacity;
        btn_f_id = setTimeout(btn_f_out,10);
    }else{
        clearTimeout(btn_f_id);
        btn_f_id = null;
    }
}

/*slide_btnの透明度*/
function btn_opacity(num){
    for(var i = 0; i < slide_menu.children.length; i++){
    slide_btn[i].style.opacity = 0.5;
}
    slide_btn[num].style.opacity = 1;
}
function btn_change(num){
    btn_count++
    if(btn_count == 5){
        btn_count = 0;
    }
    btn_opacity(num);
}

/*最初に画像をランダム表示*/
slide_count = Math.floor(Math.random() * 5);
btn_count = slide_count;
btn_change(btn_count);
slide1.src = 'img/' + img_arr[slide_count];

if(slide_count == 4){
    slide2.src = 'img/' + img_arr[0];
    slidecount = 0;
}else{
slide2.src = 'img/' + img_arr[slide_count+1];
}

/*画像を置換*/
function slide1_change(){
    slide_count++
    if(slide_count == 5){
        slide_count = 0;
    }
    slide1.src = 'img/' +img_arr[slide_count];
    
}
function slide2_change(){
    if(slide_count == 4){
        slide2.src = 'img/' +img_arr[0]
    }else{
    slide2.src = 'img/' +img_arr[slide_count + 1];
    }
}

/*フェイドアウト*/
function f_out(){
    s_id = 0;
    if(opacity > 0 ){
        opacity -= 0.01
        slide1.style.opacity = opacity;
        f_id = setTimeout(f_out,10);
    }else{
        clearTimeout(f_id);
        slide1.style.zIndex = 100;
        slide2.style.zIndex = 200;
        slide1_change();
    }
}

/*フェイドイン*/
function f_in(){
    s_id = 1;
    if(opacity < 1 ){
        opacity += 0.01
        slide1.style.opacity = opacity;
        f_id = setTimeout(f_in,10);
    }else{
        clearTimeout(f_id);
        slide2_change();
    }
}