クリックでも一定時間ごとに自動でも切り替わるスライダーです。
どのくらいで切り替わるかもわかるようにメーターも設置しました。
切り替えはやメーターの描画はJavaScript(jQuery)で行っています。
ソースコード
HTML
<div id="slidegallery"> <div id="slide"> <img src="images/img1.png" alt=""> </div> <ul id="paging"> <li data-src="images/img1.png" class="active"><span></span></li> <li data-src="images/img2.png"><span></span></li> <li data-src="images/img3.png"><span></span></li> <li data-src="images/img4.png"><span></span></li> <li data-src="images/img5.png"><span></span></li> </ul> </div>
CSS
img { width: 100%; height: auto; vertical-align: middle; } #slidegallery { margin: 0 auto; } #slide { position: relative; } #slide img { position: absolute; } #paging { display: flex; flex-flow: row wrap; justify-content: center; list-style: none; } #paging li { flex: 1 1 auto; height: 20px; border-right: 1px solid #fff; background: #ccc; cursor: pointer; } #paging li:last-child { border-right: none; } #paging li:hover { background: #ddd; } #paging li span { display: block; width: 0; height: 100%; } #paging li.active span { background: #ff0; }
JavaScript
$(function(){ var fps = 100; //何フレームで描画するか var size = 0; //表示時間を表すメーターの幅(単位は%) var duration = 4; //何秒でスライドを切り替えるか //高さの設定 $('#slide').height($('#slide img').height()); $(window).resize(function(){ $('#slide').height($('#slide img').height()); }); //スライドの切り替えと表示時間を描画するためのタイマー var slideTimer = setInterval(function(){ //メーターの描画 $('#paging li.active span').css('width',size+'%'); size += 100/(duration*fps); //100%を超えたらスライドの切り替え if(size > 100){ //activeを持っているli要素が最後だったら最初のli要素を、それ以外は次のli要素がクリックされたことにする if($('#paging li.active').index() === $('#paging li').length-1){ $('#paging li:first-child').click(); }else{ $('#paging li.active').next().click(); } } },1000/fps); //ボタンをクリックしたときの処理 $('#paging li').click(function(){ //メーターのリセット size = 0; $('#paging li span').css('width',size+'%'); //連続クリックによる大量挿入を防ぐためのif文 if(!$(this).hasClass('active')){ $('#paging li.active').removeClass('active'); $(this).addClass('active'); $('#slide img').before('<img src="'+$('#paging li.active').attr('data-src')+'" alt="">'); $('#slide img:not(:first)').fadeOut('fast', function(){ $(this).remove(); }); } }).each(function(){ //画像のプリロード $("<img>").attr("src", $(this).attr('data-src')); }); });
簡単な解説
クリックで切り替わるようにする
まずはpaging li要素をクリックしたらスライドが切り替わるようにします。
//ボタンをクリックしたときの処理 $('#paging li').click(function(){ //メーターのリセット size = 0; $('#paging li span').css('width',size+'%'); //連続クリックによる大量挿入を防ぐためのif文 if(!$(this).hasClass('active')){ $('#paging li.active').removeClass('active'); $(this).addClass('active'); $('#slide img').before('<img src="'+$('#paging li.active').attr('data-src')+'" alt="">'); $('#slide img:not(:first)').fadeOut('fast', function(){ $(this).remove(); }); } }).each(function(){ //画像のプリロード $("<img>").attr("src", $(this).attr('data-src')); });
メーターのリセットというところは表示時間のメーターと自動で切り替えるのに関わる部分なので、あとで解説します。
//メーターのリセット size = 0; $('#paging li span').css('width',size+'%');
メーターの表示と一定時間ごとに切り替わるようにする
まずは使用する変数の宣言
var fps = 100; //何フレームで描画するか var size = 0; //表示時間を表すメーターの幅(単位は%) var duration = 4; //何秒でスライドを切り替えるか
setIntervalを使って一定時間ごとに処理を繰り返します。
var slideTimer = setInterval(function(){ //ここに処理を書く },1000/fps);
まずはメーターの描画。
.css()を使ってメーターのwidthを増やしてくことで実現しています。
var slideTimer = setInterval(function(){ //メーターの描画 $('#paging li.active span').css('width',size+'%'); size += 100/(duration*fps); },1000/fps);
あとはメーターのサイズが100%を超えたときの処理を加えます。
//100%を超えたらスライドの切り替え if(size > 100){ //activeを持っているli要素が最後だったら最初のli要素を、それ以外は次のli要素がクリックされたことにする if($('#paging li.active').index() === $('#paging li').length-1){ $('#paging li:first-child').click(); }else{ $('#paging li.active').next().click(); } }
現在activeクラスがあるli要素が何番目かによってさらに分岐。
最後の要素だったら最初の要素をクリックされたことにして、そうでなかったらその次の要素がクリックされたことにします。
これでさきほど解説したクリックのイベントが発生するので、画像が自動で切り替わります。
ここでさきほどあとで解説すると言ったこの部分が出てきます。
//メーターのリセット size = 0; $('#paging li span').css('width',size+'%');
ここでメーターのサイズをリセットして、また0から横に伸びて行くようにしています。
おわりに
今回はシンプルなものにしましたが、デザインを変えたりロールオーバーしたら止まるようにしたりといろいろ変更できそうですね。
コメント