@ JavaScript

Crossfade:クロスフェード

クロスフェードで画像が切り替わる仕組みを考えてみます。

フェードインは、CSS の transition プロパティを使って opacity の値を 0 から 1 に変化することで表現できます。フェードアウトは逆の変化です。

JavaScript の setTimeout() メソッドを使って一定時間後に DOM 要素に設定した画像名とクラス名の書き換え処理を実行して、画像の不透明度を切り替え、クロスフェードを表現します。

crossfaded.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>
.fadeout {
  opacity: 0;
  transition: 1s ease-in-out;
}
.fadein {
  opacity: 1;
  transition: 1s ease-in-out;
}
img {
  width: 100%;
  min-width: 100%;
}
</style>
</head>

<body>
<div>
  <img src="images/slide01.jpg" id="slide1" class="fadeout" style="position:absolute">
  <img src="images/slide02.jpg" id="slide2" class="fadein">
</div>
<script>
var n = 0;
var slideImg = new Array;
slideImg[n++] = "images/slide01.jpg";
slideImg[n++] = "images/slide02.jpg";
slideImg[n++] = "images/slide03.jpg";
slideImg[n++] = "images/slide04.jpg";
var currentImg = -1;
var flg = 0;

function slide() {
  currentImg = (currentImg < slideImg.length - 1) ? currentImg + 1 : 0;
  flg = (flg == 0) ? 1 : 0;

  if (flg == 0) {
    document.getElementById("slide1").src = slideImg[currentImg];
    document.getElementById("slide1").className = "fadein";
    document.getElementById("slide2").className = "fadeout";
  } else {
    document.getElementById("slide2").src = slideImg[currentImg];
    document.getElementById("slide1").className = "fadeout";
    document.getElementById("slide2").className = "fadein";
  }

  setTimeout("slide()", 5000);
}

window.onload = slide;
</script>
</body>

</html>

demo