リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ 時間経過後画像変更させる方法

JavaScript

時間経過後画像変更させる方法

JavaScriptで一定時間経過後画像を変更させるサンプル。
サンプルはあらかじめ画像に0.jpgから連番となるように名前をつけておき、順番に表示させている。

【サンプル】をみる

考え方はZindexで2枚のレイヤを用意し、上にある画像を徐々に透明にしていき、完全に透明になった時点で上の画像を 下にある画像と同じものにし、下にある画像を次の画像に変更する。後は繰り返し。
イメージ
2枚のレイヤを使用することで、画像が表示された時点で次の画像を読み込みが開始する為、比較的スムーズに表示できると思われる。


【サンプルソース】JS

<script type="text/javascript">
// <![CDATA[
var a = 1;//透明度変数
var imgNo = 0;//画像No変数
var totalImg = 5;//画像枚数 1枚目は0.jpg
var myImg = new Image();//画像ブジェクト

window.onload = function(){
	//初期画像設定
	myImg = "url(\"gazou/"+imgNo+".jpg\")";
	//下のレイヤーに画像配置
	document.getElementById("haikeilayerlow").style.background = myImg;
	document.getElementById("haikeilayerlow").style.backgroundPosition = "center center";
	//○秒後一発タイマー起動
	timeID1 = setTimeout('timeEvent1()',1*1000);
}

//一発タイマー起動
function timeEvent1(){
	//繰り返しタイマー起動
	timeID2 = setInterval('timeEvent2()',0.05*1000);
}

//繰り返しタイマー起動
function timeEvent2(){
	//上画像の透明度を少しずつさげていく
	if(a > 0){
		a = a - 0.05;
		document.getElementById("haikeilayerup").style.opacity = a;
	}else{
		//タイマー停止
		clearInterval(timeID2);
		//透明度をリセットし、同じ画像を上に配置
		a = 1;
		document.getElementById("haikeilayerup").style.background = myImg;
		document.getElementById("haikeilayerup").style.backgroundPosition = "center center";
		document.getElementById("haikeilayerup").style.opacity = a;
		//さらに下の画像を置き換えておく
		imgNo= (imgNo + 1) % totalImg;
		myImg = "url(\"gazou/"+imgNo+".jpg\")";
		document.getElementById("haikeilayerlow").style.background = myImg;
		document.getElementById("haikeilayerlow").style.backgroundPosition = "center center";
		//○秒後一発タイマー起動
		timeID4 = setTimeout('timeEvent1()',3*1000);
	}
}
// ]]>
</script>


【サンプルソース】css

body {
	margin: 0px;
	padding: 0px;
	background-color: #000000;
}

#haikeilayerup {
	position: fixed;
	z-index: 2;
	background-attachment: fixed;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	background-color: #000000;
	opacity: 1;
}

#haikeilayerlow {
	position: fixed;
	z-index: 1;
	background-attachment: fixed;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	background-color: #000000;
}


【サンプルソース】XHTML

<div id="haikeilayerlow"></div>
<div id="haikeilayerup"></div>
last update 2010.11.27
参考・出典等
フルサイズ フリー素材 (JPEG, RAWデータ配布)

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2010 Riptac. All Rights Reserved.