WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

プラグインJavascript / CSS Crossfaderでクロスフェード

デモはこちら
http://efu.sakura.ne.jp/web/crossfader/

クロスフェードとは

フェードインとフェードアウトを繋げ重なりながら切り替わる効果。

クロスフェードプラグインをダウンロードする。

www.brandspankingnew.net

ダウンロードしたファイルを解凍し、
中のJavaScriptファイル(bsn.Crossfader.js)を
自分の管理するフォルダーに入れる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Crossfader</title>
  <style>
  html,body,div,ul,img {
  margin: 0;
  padding: 0;
  }
  ul {
  list-style: none;
  }
  img {
  border: none;
  vertical-align: bottom;
  }
  html,body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #container {
    width: 100%;
    height: 100%;
  }
  #img_fader {
    width: 100%;
    height: 100%;
  }
  #img_fader li {
    width: 100%;
  }
  #img_fader li img {
    width: 100%;
    height: auto;
  }
  </style>
<script src="js/bsn.Crossfader.js"></script>
</head>
<body>
<body>
<div id="container">
<ul id="img_fader">
<li id="img1"><img src="img/01.jpg" height="803" width="1200" alt=""></li>
<li id="img2"><img src="img/02.jpg" height="797" width="1200" alt=""></li>
<li id="img3"><img src="img/03.jpg" height="803" width="1200" alt=""></li>
<li id="img4"><img src="img/04.jpg" height="797" width="1200" alt=""></li>
</ul>
</div><!-- /#container -->
<script>
var cf = new Crossfader( new Array('img1','img2','img3','img4'), 2000, 3000 );
</script>
</body>
</html>

配列Arrayの後にある最初の2000はフェードする時間(2秒)で、
次の3000は表示時間(3秒)