- 締切済み
画像切り換えで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>
関連するQ&A
- 指定時間ごとに画像とリンク先を変えるには？
バナーが指定時間ごとに変わるページを 作りたいと思っているのですが 下記のソースではどうもうまくいきません。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> <TITLE>指定時間毎に画像とリンク先を変えるには？</TITLE> </HEAD> <BODY BGCOLOR="#ffffff" onLoad="banner()"> <SCRIPT language="JavaScript"> <!-- num=1; function banner(){ if(num==1){ document.photo.src="img/no_0.gif", document.photo.href= "http://www.test.co.jp/0"; num=2; }else if(num==2){ document.photo.src="img/no_1.gif", document.photo.href= "http://www.test.co.jp/1"; num=3; }else if(num==3){ document.photo.src="img/no_2.gif", document.photo.href= "http://www.test.co.jp/2"; num=4; }else if(num==4){ document.photo.src="img/no_3.gif", document.photo.href= "http://www.test.co.jp/3"; num=5; }else if(num==5){ document.photo.src="img/no_4.gif", document.photo.href= "http://www.test.co.jp/4"; num=6; }else if(num==6){ document.photo.src="img/no_5.gif", document.photo.href= "http://www.test.co.jp/5"; num=1; } setTimeout("banner()",5000); } //--> </SCRIPT> <a href="http://www.test.co.jp/ng" NAME="photo"><IMG SRC="img/1.jpg" NAME="photo" ALIGN="BOTTOM" WIDTH="60" HEIGHT="110" BORDER="0"></a> </BODY> </HTML> 画像は変わるのですがリンク先が変わらないようで…。 どなたかご指示をいただけないでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- スライドショーなんですが・・・。
スライドショーで 下記のようなHTMLなのですが 一回停止をクリックしてから 再開をクリックすると 一枚目の写真に戻るようになっています。 停止したところから再開するにはどう直せばよいのですか？ よろしくお願いします <HTML> <HEAD> <TITLE>スライド</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var num = 1; var flag = 1; var Fm = new Array(5); Fm[0]=""; Fm[1]=" 一枚目"; Fm[2]=" 二枚目"; Fm[3]=" 三枚目"; Fm[4]=" 四枚目"; Fm[5]=" 五枚目"; function timer() { if(document.img.complete) { document.img.filters.blendTrans.Apply(); document.img.src = "photo" + num + ".JPG"; document.img.filters.blendTrans.Play(); document.Fmess.fmess.value = Fm[num]; num++; if(num >5) num = 1; } if(flag == 1) { TimerID = setTimeout("timer()", 5000); } } function crl() { clearTimeout(TimerID); flag = 0; } function restart() { TimerID = setTimeout("timer()", 5000); num = 1; flag = 1; } //--> </SCRIPT> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" onLoad="setTimeout('timer()', 6000)"> <CENTER> <IMG NAME="img" SRC="写真01.JPG" style="filter:blendTrans(duration=1)"> <FORM NAME="Fmess"> <INPUT TYPE="text" NAME="fmess" VALUE=" 説明 " SIZE=50> </FORM> <A HREF="JavaScript:crl()">[停止]</A> <A HREF="JavaScript:restart()">[再開]</A> <A HREF="JavaScript:window.close()">[終了]</A> </CENTER> <BR> </BODY> </HTML>
- ベストアンサー
- JavaScript
- javascriptで画像をテーブルに出力する方法
javascriptで定期的に入れ替えている画像をテーブルに出力（表示）する方法を教えてください。 <html> <head> <script language="JavaScript"><!-- myImageCnt = 4; myImage = new Array( "img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg" ); myNowCnt = 0; function myChange(){ if (myNowCnt == myImageCnt-1){ myNowCnt=0; }else{ myNowCnt++; } document.myFormImg.src = myImage[myNowCnt]; setTimeout( "myChange()" ,5000 ); } // --></script> <img src="img0.jpg" width="200" height="200" name="myFormImg" /> <script language="JavaScript"><!-- myChange(); // --></script> </head> </html>
- ベストアンサー
- JavaScript
- １つのファイルで画像をクリックしたら差し代わる方法
表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>
- ベストアンサー
- JavaScript
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでループをやめたい
javascript初心者です。 下記の様にソースが書いてあります。 画像が表示され、順番に表示されるのはいいのですが、 最後の画像になった時に、最初の画像に戻り、永遠と画像がループし、 表示されてしまいます。最後の画像になった時に、表示を止め、 最後の画像のまま表示を止めたいのですが、わかりません。 ご教示お願いいたします。 <SCRIPT language="JavaScript"> <!-- FITime=1; FOTime=8; n=10; flg=1; num=0; cnt=7; Fna="./img"; Fexp="jpg"; // 以下スクリプト本体 function fade(img){ if(flg==1){ document.images[img].src=Fna+num%cnt+"."+Fexp; if(n<=0) flg=0; document.images[img].filters['alpha'].opacity=n; if(n>=99)speed=0.05;else speed=5; n-=speed; setTimeout("fade('"+img+"')",FOTime); } else{ document.images[img].src=Fna+(num+1)%cnt+"."+Fexp; document.images[img].filters['alpha'].opacity=n; if(n>=98)speed=0.05;else speed=2; n+=speed; if(n>=100) {flg=1;++num;if(num%cnt==0){num=0;}} setTimeout("fade('"+img+"')",FITime); } } //--> </SCRIPT> </head> <img src="img0.jpg" name="img" style="filter:alpha(opacity=100)">
- ベストアンサー
- JavaScript
- 画像を貼り出してその後、その画像をクリックすると大きく表示されるように
画像を貼り出してその後、その画像をクリックすると大きく表示されるようにしたいのですが、どうしたら良いかわかりません。 <html> <head> <title>画像を大きくする</title> <script type="text/javascript"> <!-- var imagetachi = 5; //イメージの切り替え function kirikae(num){ document.main.src = "big/photo" + num + ".jpg"; } // --> </script> </head> <body> <center> <script type="text/javascript"> <!-- //サムネールの書き出し for (i=1; i <=imagetachi; i++) { document.write('<img src="small/photo' + i + '.jpg" onclick="kirikae(i)">'); } // --> </script> <hr> <img src="big/photo1.jpg" name="main"> </center> </body> </html> どうやらkirikae(i)をkirikae(' + i +')にすれば良いとまではわかったのですが、なぜ(' + i +')にしないといけないのかがわかりません。 (' + i +')にすると関数の処理が document.main.src = "big/photo" + + i + + ".jpg";になってしまいませんか？？ 初心者なので+ i +の意味がよくわかりません。 よろしくお願い致します。
- 締切済み
- JavaScript
- 2箇所に設定したスライドショー、1箇所しか動かない
こんにちは、JavaScript超初心者です。 スライドショーを2箇所に設定したのですが、 1箇所しか動きません。ソースを見ていただき、 アドバイスを頂けると助かります。 よろしくお願い致します。 <BODY onLoad="slideshow()"> <TABLE WIDTH="" BORDER="" CELLSPACING="" CELLPADDING=""> <TBODY> <TR> <TD WIDTH="" HEIGHT=""> <IMG SRC="akaemi.jpg" ID="img1" WIDTH="" HEIGHT=""> </TD> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=1; var j=1; picture=new Array(); for(i=1; i<=4; i++){ picture[i] = new Image(); }; picture[1].src = "akaemi.jpg"; picture[2].src = "noristop2.jpg"; picture[3].src = "ume.jpg"; picture[4].src = "mizuba.jpg"; function slideshow(){ img1.src= picture[j].src; j++; if(j>=5){ j=1 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> <TD WIDTH="" HEIGHT=""> <IMG SRC="tyou1.jpg" ID="img2" WIDTH="" HEIGHT=""></TD> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=5; var j=5; photo=new Array(); for(i=5; i<=8; i++){ photo[i] = new Image(); }; photo[5].src = "tyou1.jpg"; photo[6].src = "tyou2.jpg"; photo[7].src = "tyou3.jpg"; photo[8].src = "tyou4.jpg"; function slideshow(){ img2.src= photo[j].src; j++; if(j>=9){ j=5 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> </TR> </TBODY> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 効果付きの画像変化
画像を効果を付けて変化をさせて、三回変化したら、変化を終了させたいんですけど、下の記述に何を加えたら良いか分かりましたら教えて下さい。お願いします。 img#img1 { filter: progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2.0); } --> </style> <script language="JavaScript"> <!-- function SymError() { return true; } window.onerror = SymError; var SymRealWinOpen = window.open; function SymWinOpen(url, name, attributes) { return (new Object()); } window.open = SymWinOpen; //--> </script> <script type="text/javascript"> <!-- var ie = navigator.userAgent.indexOf("MSIE "); var verIE = 0, winIE = -1; if(ie >= 0) { verIE = parseFloat(navigator.userAgent.substr(ie + 5)); winIE = navigator.userAgent.indexOf("Windows"); } var photo = new Array("aki1.jpg", "aki2.jpg", "aki3.jpg"); var i = 0; function transImage2 () { var trans = 0; var img = document.images['img1']; if(verIE >= 5.5 && winIE >= 0) { if(img.filters) trans = img.filters[0]; } if(img.complete) { i++; if(i >= photo.length) i = 0; if(trans) trans.apply(); img.src = photo[i]; if(trans) trans.play(); } setTimeout("transImage2()", 4000); } //--> </script> </head> <body onload="setTimeout('transImage2()', 4000);"> <table> <tr> <td> <img name="img1" id="img1" src="aki1.jpg" width="240" height="180" alt=""> </td> </body>
- ベストアンサー
- JavaScript
お礼
大変詳細にありがとうございます。 これはこれで有効な使用方法がありそうですが 質問の内容があまり適切でなかったのですが、 ＨＰのオープニングのようなところに使いたいため すべてオートのスライドショー（onload）でありたいことです。 トランジションは多分23でいいかと思います。