@ PHP

Carousel:カルーセル

Carousel(カルーセル:回転木馬)は、merry go round(メリーゴーラウンド)のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。

carousel.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>
.carousel {
  overflow: hidden;
  white-space: nowrap; /*自動的改行しない*/
}
.carousel img {
  display: inline-block;
  height: auto;
}
img {
  width: 100%;
  max-width: 100%;
}
</style>
</head>

<body>
<div class="carousel">
  <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() {

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

  function changeImg() {

    //img の先頭要素のクローンを作成
    var clone = $(".carousel img:first").clone(true);

    // 現在の画像をフェードアウト
    $(".carousel img:first").animate({
      marginLeft: "-100%"
    }, {

      //アニメーションの速度とパターン
      duration: 1500,
      easing: 'swing',

      //アニメーション終了時の処理
      complete: function() {

        //処理完了時に img の先頭要素を削除
        $(".carousel img:first").remove();

        //クローンを img の最後の要素に追加
        clone.clone(true).insertAfter($(".carousel img:last"));

      }

    });

  } // end changeImg()

});
</script>
</body>

</html>

demo