HOME 　>>> 　HTML整理ノート 　>>> DHTML -- 基本編　　　応用編

トランジション効果を使いスライドショー

画像のｽﾗｲﾄﾞｼｮｰ

Sample Source......................................................................>>>

<script language="JavaScript"><!--
if(document.images){		//画像のﾌﾟﾘﾛｰﾄﾞ
  img = new Array();
  img[0] = new Image();
  img[0].src = "../../soft/imgcpb1/backa01.gif";
  img[1] = new Image();
  img[1].src = "../../soft/imgcpb1/backb02.jpg";
  img[2] = new Image();
  img[2].src = "../../soft/imgcpb1/backe07.gif";
  img[3] = new Image();
  img[3].src = "../../soft/imgcpb1/backe11.gif";
  img[4] = new Image();
  img[4].src = "../../soft/imgcpb1/backf03.gif";
  img[5] = new Image();
  img[5].src = "../../soft/imgcpb1/backf05.gif";
  img[6] = new Image();
  img[6].src = "../../soft/imgcpb1/backf07.gif";
}
var idx = 1;  //画像配列のindex番号
var n=1;      //ﾄﾗﾝｼﾞｼｮﾝの種類の番号
var timerID;  //ﾀｲﾏｰ変数
function ShowStart(){
  clearTimeout(timerID);
  PIC.style.filter = "revealTrans()";
  PIC.filters[0].Apply();  //ﾄﾗﾝｼﾞｼｮﾝを適用
  PIC.filters[0].Transition=n;  //引数nで効果の種別を判別
  n += 3;
  PIC.src = img[idx++].src; //切替え先の画像指定
  PIC.filters[0].Play(3);   //効果ﾀｲﾑ3秒でﾄﾗﾝｼﾞｼｮﾝを実行する
  if(idx < 7)timerID = setTimeout("ShowStart()",5000);
  else{
    ShowStop();
    setTimeout("alert('ｽﾗｲﾄﾞｼｮｰは終了しました。')",5000);
  }
}
function ShowStop(){
  idx = 0;
  n = 0;
  clearTimeout(timerID);
}
//--></script>
</head>
<body>
画像のｽﾗｲﾄﾞｼｮｰ 
<img id="PIC" src="../../soft/imgcpb1/backa01.gif" width="176" height="106">
<form name="form1">
  <input type="button" value="スライドショー開始" onclick="ShowStart();">
  <input type="button" value="スライドショー停止" onclick="ShowStop();">
</form>

end(最終更新:12/11/16)