前回はパラパラ漫画で必須の写真のコマ送りを実装しました。
〇【ワードプレス】JavaScriptを使用してページをコマ送り・戻りさせた。
今回は一つのボタンでパラパラ漫画の再生と停止を行いたいと思います。
以下のコードは作成途中で書いていたコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>sample1</title>
</head>
<body>
<img id="imagePlace" src="https://lifeinfo-navi.com/wp-content/uploads/2022/02/1.png"/>
<p></p>
<button id="autoPlay">再生</button>
<p></p>
<script type="text/javascript">
// img要素を取得する
let img = document.getElementById("imagePlace");
// 表示する画像番号
let index = 1;
document.getElementById("autoPlay").onclick = function(){
let commonBu = document.getElementById("autoPlay").innerHTML
console.log("1"+commonBu);
if(commonBu ==="再生"){
document.getElementById("autoPlay").innerHTML = "停止";
intervalID = setInterval(function(){
index++;
if(index>5){ //画像の枚数を指定する。
index=1
};
img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
//break;
if(commonBu ==="停止"){
clearInterval(intervalID);
console.log("2"+commonBu);
document.getElementById("autoPlay").innerHTML = "再生";
console.log("3"+commonBu);
}},1000);
//break;
};
}
</script>
</body>
</html>スクリプトタグ内のコードは以下になります。
// img要素を取得する
let img = document.getElementById("imagePlace");
// 表示する画像番号
let index = 1;
document.getElementById("autoPlay").onclick = function(){
let commonBu = document.getElementById("autoPlay").innerHTML
console.log("1"+commonBu);
if(commonBu ==="再生"){
document.getElementById("autoPlay").innerHTML = "停止";
intervalID = setInterval(function(){
index++;
if(index>5){ //画像の枚数を指定する。
index=1
};
img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
//break;
if(commonBu ==="停止"){
clearInterval(intervalID);
console.log("2"+commonBu);
document.getElementById("autoPlay").innerHTML = "再生";
console.log("3"+commonBu);
}},1000);
//break;
};
}実行結果
再生を押すと自動で写真のコマ送りができますが、「停止」ボタンをおしてもコマ送りがストップしません。
デバッグ機能をうまく使いこなすことができないために、プログラムの動きを把握するために、「console.log（）」が多用されています。
なぜ上記のコードで停止ボタンを押しても、パラパラ漫画が動いてしまうのか悩みました。
でも、「switch文」を使うとうまくいったよ。
完成コード
document.getElementById("autoPlay").onclick = function(){
switch(document.getElementById("autoPlay").innerHTML){
case "再生" :
document.getElementById("autoPlay").innerHTML = "停止";
intervalID = setInterval(function(){
index++;
if(index>5){ //画像の枚数を指定する。
index=1
};
img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
},1000);
break;
case "停止":
clearInterval(intervalID);
document.getElementById("autoPlay").innerHTML = "再生";
break;
};
}解説
switch文では、case節の最後にbreakを呼び出さないと(書かないと)、意図せず他のcase節まで実行されることになります。
この仕様はバグの混入の元になるため、switch文を敬遠する開発者もいます。そのため、if、else if、elseを使って、switch文を代用することがしばしばあります。switch文でbreakを書かない場合には、以降のcase節のコードも実行されるという点に注意してください。
とりあえず、switch文で1つのボタンでパラパラ漫画の再生/停止を行うことができましたので、良しとします。