ET CETERA
コンピュータ IT
- カレンダーアプリ《MyCalendar》Android
- カレンダーアプリ《予定表》Android
- InkScapeでイラスト
- NetBeans11の日本語化
- 進捗バー付きスライダー
- アナログ時計を作ってみた
- InkScape:タイルクローンで円周方向にコピー
- FFFTPで転送した画像が壊れていた
工作
- 消防自動車
- ゴミ収集車
- ゴム銃・マシンガンの説明ビデオ
- キッズチェアを作る
- ゴム銃２作目を作った
- ボール盤を改造
- イチジョウマン７の上着
- イチジョウマン７のヘッドバンド
- そうめんの箱製ひな壇
- レトロな木製ロボット
- 能面を打つ
- ストーブガード
- イチジョウマン７のベルト
ガーデン
進捗バー付きスライダー
以前のサイトで使っていたスライダーです。プログレスバーや、そのスライドが何番目かを示すマークを表示しています。 忘れないように備忘録として掲載しました。
スライダーのコード（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);
// スライドの１枚目を表示
$("#slideList li:first").show();
// １枚目のプログレスバー
$("#progressBar").stop().css("width","0px").animate({width:"100%"},
delay, "linear");
// スライドマークを１枚目に
$("#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);
});
});
工夫すればもっと良いものができるかと思いますが、とりあえずここまでにしました。