スライドショーや動画もサイコロを転がすのと原理は同じです。
乱数や整数化などは必要ないので、プログラム的には逆に簡単だと思います。
立体置場にファイル名をセットしておいて、タイマーで一定間隔で順番に変えて行けばいい。
特に、作り方の解説は、いらないと思う。
デモとソースおよび素材を付けておくので解読してください。
１、スライドショー
マウスを乗せてください。
素材イメージファイル
ソース
<![CDATA[
<html>
<head>
<title>スライドショー</title>
<script language="javascript">
<!--
syasin_file=new Array("011.jpg","012.jpg","013.jpg","014.jpg","015.jpg","016.jpg");
r=0;
//停止
function at(){
flg=0;clearTimeout(tim);
}
//入れ替え
function chg(){
r++;
if(r>5){
r=0;
}
document.syasin.src=syasin_file[r];
tim=setTimeout("chg()",1000);
}
//-->
</script>
</head>
<body>
<a href="JavaScript:void(0)" onMouseover="chg()" onMouseout="at()">
<img src="011.jpg" name="syasin" border=0>
</a>
</body>
</html>
]]>
２、動画
マウスを乗せてください
素材イメージファイル
ソース
<![CDATA[
<html>
<head>
<title>動画</title>
<script language="javascript">
<!--
syasin_file=new Array();
//写真を記憶させておく
syasin_file[0]=new Image();syasin_file[0].src="cyo0.jpg";
syasin_file[1]=new Image();syasin_file[1].src="cyo1.jpg";
syasin_file[2]=new Image();syasin_file[2].src="cyo2.jpg";
syasin_file[3]=new Image();syasin_file[3].src="cyo3.jpg";
syasin_file[4]=new Image();syasin_file[4].src="cyo4.jpg";
syasin_file[5]=new Image();syasin_file[5].src="cyo5.jpg";
r=0;
//停止
function at(){
flg=0;clearTimeout(tim);
}
//入れ替え
function chg(){
r++;
if(r>5){
r=0;
}
document.syasin.src=syasin_file[r].src;
tim=setTimeout("chg()",200);
}
//-->
</script>
</head>
<body>
<a href="JavaScript:void(0)" onMouseover="chg()" onMouseout="at()">
<img src="hyo11.jpg" name="syasin" border=0>
</a>
</body>
</html>
]]>
スライドショーとの違いはファイル名と、タイマーの間隔のみです。
|
