okuden-labo
10/5/2016 - 2:18 AM

jQuery クロスフェードで切り替わるシンプルな画像スライドショー

jQuery クロスフェードで切り替わるシンプルな画像スライドショー

jQuery クロスフェードで切り替わるシンプルな画像スライドショー.md
content_copyfile_download
  • Rendered
  • Source

jQuery クロスフェードで切り替わるシンプルな画像スライドショー

シンプルなスライドショーに使うならおすすめです。 ※横幅固定なのでレスポンシブには対応してません。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #slide {
    width: 640px;
    height: 300px;
    margin: 0 auto;
    position: relative;
  }
  #slide img {
    position: absolute;
    left: 0;
    top: 0;
  }
  </style>
</head>

<body>
  <div id="slide">
    <ul>
      <li><img src="./images/image1.jpg" alt="" width="640" height="420" /></li>
      <li>
        <a href=""><img src="./images/image2.jpg" alt="" width="640" height="420" /></a>
      </li>
      <li>
        <a href=""><img src="./images/image3.jpg" alt="" width="640" height="420" /></a>
      </li>
      <li>
        <a href=""><img src="./images/image4.jpg" alt="" width="640" height="420" /></a>
      </li>
      <li>
        <a href=""><img src="./images/image5.jpg" alt="" width="640" height="420" /></a>
      </li>
    </ul>
  </div>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
  $(function() {
    // 設定
    var $width = 640; // 横幅
    var $height = 420; // 高さ
    var $interval = 5000; // 切り替わりの間隔（ミリ秒）
    var $fade_speed = 1500; // フェード処理の早さ（ミリ秒）
    $("#slide ul li").css({
      "position": "relative",
      "overflow": "hidden",
      "width": $width,
      "height": $height
    });
    $("#slide ul li").hide().css({
      "position": "absolute",
      "top": 0,
      "left": 0
    });
    $("#slide ul li:first").addClass("active").show();
    setInterval(function() {
      var $active = $("#slide ul li.active");
      var $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>
</body>

</html>

参考サイト