【jQuery】パラパラ漫画にスクロールバーを設置してみた。

2022-03-29
2022-03-29
JavaScript
128view

JavaScript 【jQuery】パラパラ漫画にスクロールバーを設置してみた。

前回は jQuery の環境構築についてお話ししました。

〇【JQuery入門】環境構築の方法。

「jQuery」はJavaScript初心者が高度な処理を行うための必須スキルだと思います。

今回はスライドバーを設置して、スライドを動かすと画像がめくれるように実装しました。

完成コードは以下になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="C:\Users\owner\Desktop\js\jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="C:\Users\owner\Desktop\js\jquery-min.js"></script>
<script type="text/javascript" src="C:\Users\owner\Desktop\js\jquery-ui.js"></script>
</head>
<body>
<img id="imagePlace" src="https://lifeinfo-navi.com/wp-content/uploads/2022/02/1.png"/>
<div id="slider" style="width:800px;"></div>
<script type="text/javascript">
  let index = 1;
  $(function() {
      let img = document.getElementById("imagePlace");
  $('#slider').slider({
    min: 1,
    max: 5,
    step: 1,
    value: 1,
    slide: function(event, ui) {
      let index = ui.value;
      let aaa = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
      img.src = aaa;
      }
  });
});
</script>
</body>
</html>

「jquery-ui」の読み込みは自分のフォルダの階層を指定する必要があります。

「let img = document.getElementById(“imagePlace”);」の位置が重要になりました。

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

Amazon

楽天 Yahoo!

参考サイト
〇jQuery UI　Slider Widget
〇Sliderウィジェットでスライダーを生成するには？