【パラパラ漫画】マウスのホイールで画像をコマ送り/戻りをさせる。

2022-03-06
2022-03-06
JavaScript
204view

JavaScript 【パラパラ漫画】マウスのホイールで画像をコマ送り/戻りをさせる。

前回までのパラパラ漫画作成シリーズは以下のようになります。
〇【ワードプレス】JavaScriptを使用してボタンをクリックするとポップアップを表示させる。
〇【ワードプレス】JavaScriptの正しい書き方は？
〇【ワードプレス】JavaScriptでページをコマ送り・戻りさせた。
〇【JavaScript】1つのボタンでパラパラ漫画の再生/停止をやってみた。
〇【JavaScript】マウスのホイールと「パッシブリスナ」と「preventDefault」とブラウザのデフォルト処理について。

今回はマウスのホイールでパラパラ漫画が動作するように実装していきます。

完成コード



<!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>

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

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

  document.getElementById("imagePlace").addEventListener("wheel",wheelpa,{passive:false});
  function wheelpa(event){
    event.preventDefault();
    if (event.wheelDelta == -120){
      console.log("手前")
      index++;
      if(index>5){     //画像の枚数を指定する。
        index=1
      }
      img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
    }
    if (event.wheelDelta == 120){
      console.log("おく")
      index--;
      if(index<1){     //画像の枚数を指定する。
        index=5
      }
      img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
    }
  }
  </script>
</body>
</html>

let img = document.getElementById("imagePlace");
    let index = 1;
  document.getElementById("imagePlace").addEventListener("wheel",wheelpa,{passive:false});
  function wheelpa(event){
    event.preventDefault();
    if (event.wheelDelta == -120){
      console.log("手前")
      index++;
      if(index>5){     //画像の枚数を指定する。
        index=1
      }
      img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
    }
    if (event.wheelDelta == 120){
      console.log("おく")
      index--;
      if(index<1){     //画像の枚数を指定する。
        index=5
      }
      img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
    }
  }

実行結果

sample1