- 締切済み
画像切り換えでTransitionをかけたい。
フリーソースでの応用なのですが 次のJavaScriptで画像の自動切り換え表示に Transitionをかけたいのですが、知識がなくてわかりません。 アドバイスをお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var num = 1; function timer () { if(document.img.complete) { document.img.src = "photo" + num + ".jpg"; num++; if(num > 5) num = 1; } setTimeout("timer()", 1000); } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function viewSource(){ location = "view-source:" + window.location; } </SCRIPT> ----------- <BODY onload="setTimeout('timer()', 2000);"> <IMG SRC="photo1.jpg" NAME="img"> -----------
- noro6857
- お礼率88% (526/596)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- CONAN18
- ベストアンサー率42% (132/313)
＞Transitionをかけたい。とのことですがTransitionといっても色々な切り替わり方法がありますので下記を参考にされてみてはどうでしょうか //SCRIPT <html> <head> <script language="JavaScript"> <!-- var imgnum = 4; //画像枚数 var i = 2; var j; var aryimg = new Array(); for(j=1;j<imgnum+1;j++){aryimg[j] = new Image();} aryimg[1].src = "画像URL"; //画像枚数だけ記述する aryimg[2].src = "画像URL"; // aryimg[3].src = "画像URL"; // aryimg[4].src = "画像URL"; // function Imgchange(){ if(i>imgnum){i = 1;} img1.filters[0].Apply(); img1.filters[0].Transition = document.form1.transition1.value; img1.filters[0].Duration = document.form1.duration1.value; img1.src = aryimg[i].src; img1.filters[0].Play(); i++; } //--> </script> </head> <body> <img id="img1" src="画像URL" style="filter:revealTrans(duration=1)"><br><br> <form name="form1"> Transition(ワイプ番号) <select name="transition1"> <option value="0" selected>0 : box in … 四角(中央へ)</option> <option value="1">1 : box out … 四角(外へ)</option> ... <option value="22">22 : random bars vertical … ランダムライン縦</option> <option value="23">23 : random … ランダム</option> </select><br><br> Duration(切り替え時間) <select name="duration1"> <option value="1" selected>1秒</option> <option value="2">2秒</option> <option value="3">3秒</option> <option value="4">4秒</option> <option value="5">5秒</option> </select><br><br> <input type="button" value="画像切り替え" onClick="Imgchange()"> </form> </body> </html>
お礼
大変詳細にありがとうございます。 これはこれで有効な使用方法がありそうですが 質問の内容があまり適切でなかったのですが、 ＨＰのオープニングのようなところに使いたいため すべてオートのスライドショー（onload）でありたいことです。 トランジションは多分23でいいかと思います。