ウェブ学のすすめ

Study of Web Design & Programing

JavaScriptとCSSだけで1ページに複数のクロスフェードを動作させる

JavaScript

Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New

ポイント

必要なのは「bsn.Crossfader.js」のみ
id 属性を任意で付けておく
var 変数名 = new Crossfader( new Array('id名','id名','id名'), クロスフェード時間, 静止時間 );
画像だけでなくテキストのフェードも可能
1ページに複数のクロスフェードを動作させることが可能
バナーなどに使えそう

プレビュー

↓拡大表示にすると見やすいです（右上のボタンが拡大表示）。

↓スマートフォンの方はこちらからプレビューできます。
複数のクロスフェード

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数のクロスフェード</title>
<script type="text/javascript" src="js/bsn.Crossfader.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1>バルセロナ・パヴィリオン</h1>
</header>
<div id="text_fader">
<div id="txt1">
<p>建築家ミース・ファン・デル・ローエの設計で、1929年のバルセロナ万国博覧会で建設されたドイツ館</p>
</div>
<div id="txt2">
<p>広いリビングにはバルセロナチェアが置かれている。</p>
</div>
<div id="txt3">
<p>中庭に立つ女性の彫像。</p>
</div>
<div id="txt4">
<p>シンプルかつ大胆な空間構成</p>
</div>	 
</div>		    
<div id="img_fader">
<ul>
<li id="img1"><img src="http://farm4.staticflickr.com/3624/3323893148_8318838fbd.jpg" width="450" height="300" alt=""></li>
<li id="img2"><img src="http://farm4.staticflickr.com/3651/3445879840_7ca4b491e9.jpg" width="450" height="300" alt=""></li>
<li id="img3"><img src="http://farm1.staticflickr.com/135/321464104_c010dbf34c.jpg" width="450" height="300" alt=""></li>
<li id="img4"><img src="http://farm4.staticflickr.com/3023/3323897466_e61624f6de.jpg" width="450" height="300" alt=""></li>
</ul>
</div>
</div>
<script>
    var img = new Crossfader( new Array('img1', 'img2', 'img3', 'img4'), 1000, 4000 );
    var txt = new Crossfader( new Array('txt1', 'txt2', 'txt3', 'txt4'), 1000, 4000 );
</script>
</body>
</html>

CSS

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

body {
    background-image:url(http://jsrun.it/assets/v/Q/K/C/vQKCs.png);
    color:#fff;
    font-family:
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro", 
	"メイリオ", 
	Meiryo, 
	Osaka, 
	"ＭＳ Ｐゴシック", 
	"MS PGothic", 
	sans-serif
}

#container {
  width: 450px;
  margin: 20px auto;
}
header {
    background-color:#fff;
    color:#8CBB00;
    margin:20px 0;
    padding:0 0 0 30px;
    border-top:5px solid #8CBB00;
    border-bottom:5px solid #8CBB00;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

img {
    border: 7px solid #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
ul {
    list-style: none;
}

#text_fader {
    height:70px;
    margin:20px 0 0;
}

#text_fader p {
    width:450px;
}