jiichan.com

ET CETERA

進捗バー付きスライダー

以前のサイトで使っていたスライダーです。プログレスバーや、そのスライドが何番目かを示すマークを表示しています。 忘れないように備忘録として掲載しました。


スライダーのコード(HTML)

ごく普通のHTMLです。

<div id="slider">
	<ul id="slideList">
	<li><img src="./1.png"></li>
	<li><img src="./2.png"></li>
	<li><img src="./3.png"></li>
	</ul>
	<div id="progressBar"></div>
	<ul id="slideMark">
	<li></li>
	<li></li>
	<li></li>
	</ul>
	<div id="btnArea">
	<button id="btnStart">start</button>
	<button id="btnStop" disabled="disabled">stop</button>
	</div>
	</div>

スライダーのコード(CSS)

最初のスライドはdisplay:noneにしてあります。進捗のマークは中央表示です。

/* slider */
	#slider {
		position: relative;
		width: 200px;
		height: 100px;
		margin: 30px auto;
	}
	/* スライド */
	#slideList {
		width: 200px;
		height: 100px;
		overflow: hidden;
		background-color: #fff;
	}
	#slideList li {
		display: none;
		width: 200px;
		height: 100px;
	}
	#slideList img {
		width: 200px;
		height: 100px;
	}
	
	/* スライドマーク */
	#slideMark {
		position: absolute;
		width: 38px;
		top: 105px;
		left: 50%;	/* 中央配置 */
		right: 50%;	/* 中央配置 */
		transform: translateX(-50%);	/* 中央配置 */
	}
	#slideMark li {
		display: block;
		float: left;
		margin-left: 5px;
		width: 6px;
		height: 6px;
		background-color: #ccc;
		border: #fff 1px solid;
		border-radius: 6px;
	}
	#slideMark li:nth-child(1) {
		background-color: #f98131;
	}
	#slideMark li:nth-child(3) {
		margin-right: 5px;
	}
	/* プログレスバー */
	#progressBar {
		position: absolute;
		top: 100px;
		left: 0px;
		width: 0;
		height: 2px;
		background: #f98131;
	}
	/* ボタン */
	#btnArea {
		position: absolute;
		width: 200px;
		height: 30px;
		top: 120px;
	}
	#btnStart, #btnStop{
		width: 50%;
		height: 30px;
		float: left;
	}

スライダーのコード(jS)

ポイントはフェイドアウトとフェイドインのタイミングで、フェイドアウトが終わってからフェイドインされるようにしています。
一定間隔で繰り返すsetIntervalの中に入れ子でsetTimeout(フェイドイン)をいれてあります。
setTimeoutでフェイドアウト分のミリ秒を遅延させないと、動作がぎこちないようです。

$(function(){
	var delay = 6000;      // 表示時間
	var fade = 500;        // フェードスピード
	var timerId;
	
	$("#btnStart").on("click", function(){
		$(this).prop("disabled", true);
		$("#btnStop").prop("disabled", false);
		
		// スライドの1枚目を表示
		$("#slideList li:first").show();
		// 1枚目のプログレスバー
		$("#progressBar").stop().css("width","0px").animate({width:"100%"},
		delay, "linear");
		// スライドマークを1枚目に
		$("#slideMark li").css("backgroundColor","#ccc");
		$("#slideMark li").eq(0).css("backgroundColor","#f98131");
		
		// スライドの枚数を取得
		var slideIndex = $("#slideList li").length - 1;
		var imgNo = 0;
		
		// 一定間隔で処理を繰り返す =========================================
		timerId = setInterval(function(){
			// スライドショー
			if(imgNo < slideIndex){
				$("#slideList li").eq(imgNo).fadeOut(fade);
				imgNo ++;
				// フェードアウトが終わってから次のスライドをフェードイン表示
				setTimeout(function(){
					$("#slideList li").eq(imgNo).fadeIn(fade);
				}, fade);
			} else if(imgNo === slideIndex){
				$("#slideList li").eq(imgNo).fadeOut(fade);
				imgNo = 0;
				// フェードアウトが終わってから次のスライドをフェードイン表示
				setTimeout(function(){
					$("#slideList li:first").fadeIn(fade);
				}, fade);
			}
			// プログレスバー
			$("#progressBar").stop().css("width","0px").animate({width:"100%"},
			delay, "linear");
			
			// 現在のスライドマークの色
			$("#slideMark li").css("backgroundColor","#ccc");
			$("#slideMark li").eq(imgNo).css("backgroundColor","#f98131");
		}, delay);
		// ===============================================================
	});
	
	$("#btnStop").on("click", function(){
		$(this).prop("disabled", true);
		$("#btnStart").prop("disabled", false);
		$("#progressBar").stop();
		clearInterval(timerId);
	});
});

工夫すればもっと良いものができるかと思いますが、とりあえずここまでにしました。