表示時間のメーター付き、クリックでも自動でも切り替わるスライダー

Webデザイン

クリックでも一定時間ごとに自動でも切り替わるスライダーです。
どのくらいで切り替わるかもわかるようにメーターも設置しました。
切り替えはやメーターの描画は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+'%');

ここでメーターのサイズをリセットして、また０から横に伸びて行くようにしています。

おわりに

今回はシンプルなものにしましたが、デザインを変えたりロールオーバーしたら止まるようにしたりといろいろ変更できそうですね。

コメント

ホーム
トップ