@ PHP

Crossfade:クロスフェード

15 行のソースコードで実装したクロスフェードスライダーです。

crossfade.html

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

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sanitize.css">
<style>
.crossfade {
  position: relative;
}
.crossfade img {
  display: none;
  position: absolute;
}
img {
  width: 100%;
  max-width: 100%;
}
</style>
</head>

<body>
<div class="crossfade">
  <img src="images/slide01.jpg" alt="">
  <img src="images/slide02.jpg" alt="">
  <img src="images/slide03.jpg" alt="">
  <img src="images/slide04.jpg" alt="">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {

  // crossfade クラスを持った要素ごとに処理を実行
  $('.crossfade').each(function() {

    var $slideImg = $(this).find('img'), // すべての画像
    countImg = $slideImg.length, // 画像の数
    currentImg = 0; // 現在表示されている画像のインデックス

    // 1 番目の画像をフェードインで表示
    $slideImg.eq(currentImg).fadeIn();

    // 5000 ミリ秒ごとに changeImg を実行
    setInterval(changeImg, 5000);

    function changeImg() {

      // 次に表示する画像のインデックス(もし最後の画像なら最初に戻る)
      var nextImg = (currentImg + 1) % countImg;

      // 現在の画像をフェードアウト
      $slideImg.eq(currentImg).fadeOut();

      // 次の画像をフェードイン
      $slideImg.eq(nextImg).fadeIn();

      // 現在の画像のインデックスを更新
      currentImg = nextImg;
    }

  });

});
</script>
</body>

</html>

demo