【ワードプレス】JavaScriptでページをコマ送り・戻りさせた。

2022-03-03
2022-03-04
JavaScript
52view

JavaScript 【ワードプレス】JavaScriptを使用してページをコマ送り・戻りさせた。

前回はJavascriptの書き方について話しました。

〇【ワードプレス】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="moveOn">▶</button>
  <button id="Return">◀</button>
  <p></p>

  <script type="text/javascript">
    // img要素を取得する
    let img = document.getElementById("imagePlace");
  

    // 表示する画像番号
    let index = 1;
    

    //  moveOnの設定
    document.getElementById("moveOn").onclick = function(){
      index++;
      if(index>5){     //画像の枚数を指定する。
        index=1
      }
      img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
    }

    //  Returnの設定
    document.getElementById("Return").onclick = function(){
      index--;
      if(index<1){     //画像の枚数を指定する。
        index=5
      }
      img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
    }
  </script>
</body>
</html>

実行結果

sample1

let img = document.getElementById("imagePlace");
        let index = 1;
        document.getElementById("moveOn").onclick = function(){
        index++;
        if(index>5){     //画像の枚数を指定する。
            index=1
        }
        img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
        }
        document.getElementById("Return").onclick = function(){
        index--;
        if(index<1){     //画像の枚数を指定する。
            index=5
        }
        img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
        }