PHP,CSSでスライドショー

ディレクトリ内の画像ファイルをPHPで読み出しCSSでスライドショー

トップページでやっているペットの写真をスライドショーする方法

処理の流れ

PHP:ディレクトリから画像ファイルの一覧をリストに取得
PHP:リストをシャッフル
PHP:リストを先頭から10枚分に切り取り
PHP:画像ソースを記述
CSS:keyframesでアニメーションの指定
CSS:該当エレメントでanimationプロパティを指定

ポイントは、画像ディレクトリからランダムに10枚選択して表示させる事。
PHP ソースはこちら


<!DOCTYPE html>
<?php
  /***********************************/
  /* スライドショー用ファイルリスト作成    */
  /***********************************/
  // ファイルリスト作成
  $all_files=glob('ginnan/{*.jpg,*.JPG}',GLOB_BRACE);
  // リストをシャッフル
  shuffle($all_files);
  // 10枚まで表示
  $image_files=array_slice($all_files,0,10);

?>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <title>iframe</title>
    <link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
    <link href="slide.css" rel="stylesheet" type='text/css'>
  </head>
  <body>
    <div id="iframe_image">
      <?php
        // 表示させる画像を全て
        foreach($image_files as $file){
          if(is_file($file)){
            echo "<img class='slide' src='$file'>";
          }
        }
       ?>
    </div>
  </body>
</html>

CSS ソースはこちら


body {
  font-family: "Sawarabi Mincho";
  margin-right: auto;
  margin-left: auto;
}

@keyframes ginnan_slide {
  0% {opacity:0}
  5% {opacity:1}
  10% {opacity:1}
  20% {opacity:0}
}

#iframe_image {
  width:100%;
  height:480px;
  position: relative;/*親要素基準とする為*/
}

#iframe_image img.slide {
  animation: ginnan_slide 30s infinite;
  opacity: 0;
  position: absolute;
  top : 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 640px;
  height: 480px;
}

#frame_image img:nth-of-type(1){
  animation-delay:0s;
}
#iframe_image img:nth-of-type(2){
  animation-delay:3s;
}
#iframe_image img:nth-of-type(3){
  animation-delay:6s;
}
#iframe_image img:nth-of-type(4){
  animation-delay:9s;
}
#iframe_image img:nth-of-type(5){
  animation-delay:12s;
}
#iframe_image img:nth-of-type(6){
  animation-delay:15s;
}
#iframe_image img:nth-of-type(7){
  animation-delay:18s;
}
#iframe_image img:nth-of-type(8){
  animation-delay:21s;
}
#iframe_image img:nth-of-type(9){
  animation-delay:24s;
}
#iframe_image img:nth-of-type(10){
  animation-delay:27s;
}