(94) CSSとJavaScriptでスライドショーを作る。

投稿者: | 2021年1月2日

1. やりたいこと

CSSと JavaScriptを組み合わせて(=楽をして)スライドショーを実現したい。

2. やってみる

0) 実装方針

以下の方針でそれぞれに処理を記述する。

CSS : フェードアウトやスライドなどのアニメーション制御を記述する。
JavaScript : 一定周期でのクラスの追加・削除を記述する。

1) フェードアウト

style_1.css

ul{
  position: relative;
  overflow: hidden;
}
ul li.slide{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0;
}
ul li.dummy{  /* 画像の高さを得るためのダミー表示物 */
  opacity: 0;
}
.anim{
  animation-name: kf_anim;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes kf_anim {
    0%{ opacity: 1; }
  100%{ opacity: 0; }
}

script.css

$(function(){
  var to_time = 4000;
  var anim_time = 2000;
  var ary_li = $('ul li.slide');
  var max_idx = ary_li.length - 1;
  var act_idx = 0;
  // タイムアウト時のコールバック関数
  function callbackTOAnim(){
    anim_img();
  };
  // アニメーション制御関数
  function anim_img(){
    // 消去する画像にアニメーションクラスを追加
    ary_li.eq(act_idx).css('z-index','1');
    ary_li.eq(act_idx).addClass('anim');
    // 次に表示する画像の番号を決定
    act_idx = act_idx + 1;
    if(act_idx > max_idx){
      act_idx = 0;
    }
    // 次に表示する画像を可視化
    ary_li.eq(act_idx).css('z-index','0');
    ary_li.eq(act_idx).css('opacity','1');
    ary_li.eq(act_idx).removeClass('anim');
    // 表示
    setTimeout(callbackTOAnim, to_time);
  };
  // 以下、ページ表示の初回だけ実行
  ary_li.eq(act_idx).css('z-index','1');
  ary_li.eq(act_idx).css('opacity','1');
  // 表示
  setTimeout(callbackTOAnim, to_time - anim_time);
});

demo1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00094 demo1</title>
<link rel="stylesheet" href="./style_1.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./script.js"></script>
</head>
<body>
  <ul>
    <li class="dummy"><img src="./IMG_1442.JPG"></li>
    <li class="slide"><img src="./IMG_1442.JPG"></li>
    <li class="slide"><img src="./IMG_1456.JPG"></li>
    <li class="slide"><img src="./IMG_1467.JPG"></li>
    <li class="slide"><img src="./IMG_1494.JPG"></li>
    <li class="slide"><img src="./IMG_1509.JPG"></li>
  </ul>
</body>
</html>

http://www.dogrow.net/hp/sample/00094/demo1.html

2) スライド

上記の「1) フェードアウト」との差は @keyframes の定義のみ。

@keyframes kf_anim {
    0%{ left: 0; }
  100%{ left: -100%; }
}

http://www.dogrow.net/hp/sample/00094/demo2.html

3. 所感

・すべてを JavaScriptで書くよりもだいぶ楽だなぁと思うが…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)