日: 2019年7月26日

画像をフェードアウト/フェードインで自動で切り替える

うわー！もう今月終わりそう！

というわけで、Scala の学習のほうはここひと月ほど滞っているんだけど、代わりに（？）今日は、HTML と JavaScript でタイトルに書いたようなことをやってみる。

jQuery を使ってスライドショーを実現するライブラリはいろいろあるんだけど、今日はそういうのは使わないでやる。さらには、jQuery 自体も使わないでやる。やるって言ったらやる。

さて、まずは jQuery 利用バージョン。いくつかの Web ページを参考に書いた（というかほぼコピペ）のがこれ。

<!DOCTYPE html>
<html>
  <head>
    <title>Fade images</title>
    <link rel="stylesheet" href="style.css" />
    <script src="../lib/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
      $(function() {
        const $width = 960;
        const $height = 540;
        const $interval = 3000;
        const $fade_speed = 1000;
        $("#slide ul li").css({"position": "absolute", "overflow": "hidden", "width": $width, "height": $height});
        $("#slide ul li").hide();
        $("#slide ul li:first").addClass("active").show();
        setInterval(function() {
          let $active = $("#slide ul li.active");
          let $next = $active.next("li").length ? $active.next("li") : $("#slide ul li:first");
          $active.fadeOut($fade_speed).removeClass("active");
          $next.fadeIn($fade_speed).addClass("active");
        }, $interval);
      });
    </script>
  </head>
  <body>
    <div id="slide">
      <ul>
        <li><a href=""><img src="img/img1.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img2.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img3.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img4.jpg" width="960" heght="540"/></a></li>
      </ul>
    </div>
  </body>
</html>

これで、3秒ごとにフェードアウト/フェードインしながら画像が切り替わる。画像は4つ用意したけど、最後まで行ったら元に戻る。

つぎ。jQuery なしバージョン。さらにいくつかのページを参考に、試行錯誤した結果がこれ。

<!DOCTYPE html>
<html>
  <head>
    <title>Fade images</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
      function fadeIn(el, speed) {
        el.style.transition = speed;
        el.style.opacity = "1";
      }

      function fadeOut(el, speed) {
        el.style.transition = speed;
        el.style.opacity = "0";
      }

      function slide() {
        const width = "960px";
        const height = "540px";
        const interval = 3000;  // miliseconds
        const fade_speed = "1.0s";
        const slide = document.querySelectorAll("#slide ul li");
        for (let i =0; i < slide.length; i++) {
          slide[i].style.position = "absolute";
          slide[i].style.overflow = "hidden";
          slide[i].style.width = width;
          slide[i].style.height = height;
          slide[i].style.display = "block";
          slide[i].style.opacity = "0";
        }
        const first = slide[0];
        first.classList.add("active");
        first.style.opacity = "1";
        setInterval(function() {
          let active = document.querySelector("#slide ul li.active");
          let next = active.nextElementSibling || first;
          fadeOut(active, fade_speed)
          active.classList.remove("active");
          fadeIn(next, fade_speed)
          next.classList.add("active");
        }, interval);
      }

      document.addEventListener("DOMContentLoaded", slide);
    </script>
  </head>
  <body>
    <div id="slide">
      <ul>
        <li><a href=""><img src="img/img1.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img2.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img3.jpg" width="960" heght="540"/></a></li>
        <li><a href=""><img src="img/img4.jpg" width="960" heght="540"/></a></li>
      </ul>
    </div>
  </body>
</html>

動作は同じ。

最近の流れとしては jQuery 使わないっていうのがあるみたいだけど、やっぱ使ったほうが楽ではあるよなあ。