JavaScriptのスライドショー　IE以外のブラウザで再生できない

2023/08/08 09:26

このQ&Aのポイント

JavaScriptのスライドショーを提供されているサイトからコピーして使用していますが、IE以外のブラウザでは再生できません。改変してFirefox、GoogleChrome、Safariでも再生できるようにできるでしょうか？
JavaScriptのスライドショーを提供されているサイトからコピーして使用しているが、IE以外のブラウザで再生できない。Firefox、GoogleChrome、Safariでも再生できるように改変することは可能か？
提供されているサイトからコピーしたJavaScriptのスライドショーは、IE以外のブラウザでは再生できない。Firefox、GoogleChrome、Safariでも再生できるように改変することはできるか？

ベストアンサー

JavaScriptのスライドショー　IE以外のブラウザで再生できない

2008/11/13 23:04

JavaScriptのサンプルソースを提供されている方のサイトからコピーして使用させていただいているものです IEでは再生OKなのですが、Firefox、GoogleChrome、Safariで再生させるように改変することは可能でしょうか？ <script>  </script> BODY内↓ <img id="imgFil1" style="FILTER: blendTrans(duration=1)" onfilterchange="setTimeout('sulaidoImg1()',4000)" border="1"><br> <script>  </script>

clearmemo
お礼率80% (20/25)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2008/11/14 09:36 回答No.1

トランジションフィルタ自体がIE専用のものだからでは？こんな研究をしている人もいるみたい・・・　http://blog.goo.ne.jp/dong-wcat/e/78b0778846f6a3802ef067fb99762e85

質問者

お礼 2008/11/14 11:50

IE専用のものとは知らず質問してしまいました(^^; 早々にご回答いただいたおかげで別の方法で考えることができますありがとうございましたm(__)m

関連するQ&A

javascriptのスライドショーで、ポイント時に代替テキストを表示するか、ポイントしなくてもキャプションを表示するためには？
初心者ですが何とかjavascriptで自動のスライドショーを動かしています。写真にポイントした時にalt等で代替テキストを表示するか、ポイントしなくてもキャプションを表示するためにはどのような記述が必要なのでしょうか？スタイルシートは使っていません。現在はこんな感じです。根本的に違うのでしょうか？できれば簡単な方法があればと思います。 head部には <SCRIPT>  </SCRIPT> 対象部分には <SCRIPT>  </SCRIPT>
- 締切済み
- その他(ソフトウェア)
Javascript画像切り替えIEでしか動かない
Javascriptで画像を切り替えています。 IEでは動くのですが他のブラウザだと動きません。 FirefoxやChromeは何か特殊なのでしょうか？わかる人いたら教えてください。 <script type="text/javascript"> var imgs = new Array(); imgs[0] = "img/top2.jpg"; imgs[1] = "img/top3.jpg"; imgs[2] = "img/top1.jpg"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,3*1000)} </script> <img src="img/top1.jpg" width="940" height="350" id="imgframe" style="filter:blendTrans(duration=1);">
- ベストアンサー
- JavaScript
JavaScriptでスライドショーを2箇所
お世話になります。 http://bunjin.com/java/ こちらの「画像操作→スライドショーのように画像を表示する」を参考にして、フェードインするスライドショーを2か所に表示させたいと考えています。 1か所なら上手くいくのですが、2か所目がエラーになってしまいます。外部jsファイルに次のように記入し、 ------------------------------------------------------ // JavaScript Document var fade_speed = 10000; var fade_duration = 10; var image = new Array(); image[0] = '1.jpg';image[1] = '2.jpg';image[2] = '3.jpg'; var t; var j = 0; var p = image.length; var pre_load = new Array(); for (i = 0; i < p; i++) { pre_load[i] = new Image(); pre_load[i].src = image[i]; } function start_fade() { if (document.all) { document.images.photo2.style.filter="blendTrans(duration=fade_duration)"; document.images.photo2.filters.blendTrans.Apply(); } document.images.photo2.src = pre_load[j].src; if (document.all) { document.images.photo2.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('start_fade()', fade_speed); } photo[0] = '4.jpg';photo[1] = '5.jpg';photo[2] = '6.jpg'; var t2; var j2 = 0; var p2 = photo.length; var pre_load = new Array(); for (i2 = 0; i2 < p2; i2++) { pre_load[i2] = new Image(); pre_load[i2].src = photo[i2]; } function start_fade2() { if (document.all) { document.images.photo3.style.filter="blendTrans(duration=fade_duration)"; document.images.photo3.filters.blendTrans.Apply(); } document.images.photo3.src = pre_load[j2].src; if (document.all) { document.images.photo3.filters.blendTrans.Play(); } j2 = j2 + 1; if (j2 > (p2 - 1)) j2 = 0; t2 = setTimeout('start_fade2()', 8000); } ------------------------------------------------------ htmlには <body id="top" onLoad="start_fade()"> <img src="1.jpg" name='photo2' /> <img src="4.jpg" name='photo3' /> のように記入しています。後半の2か所目の指定がどこか足りない又は違うのではないかと思うのですが、色々試してみても上手くいきません。ご教授をお願いいたします。
- ベストアンサー
- JavaScript
いくつか用意したフラッシュ（.swfファイル）を切り替え表示したい
フラッシュで作成した.swfファイルをいくつか用意し、ホームページ上で切り替わるように表示したいのですが、どなたか詳しい方、教えていただけないでしょうか？画像の切り替えのソース（以下----部分）を利用してみたのですが、.jpgの部分を.swfに置き換えても、上手く表示されませんでした。具体的に、ソースを記述していただけると、大変うれしいです。都合のいい質問ですいません。よろしくお願いします。 ------------------------------------------- <html> <head> <title></title> <script language="JavaScript"> </script> </head> <body> <img id="myImg" src="img1.jpg" style="filter:revealTrans(duration=2,transition=12)" onClick="nextImg()"> </body> </html> -------------------------------------------
- ベストアンサー
- JavaScript
スライドショーなんですが・・・。
スライドショーで　下記のようなHTMLなのですが一回停止をクリックしてから　再開をクリックすると一枚目の写真に戻るようになっています。停止したところから再開するにはどう直せばよいのですか？よろしくお願いします <HTML> <HEAD> <TITLE>スライド</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </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でゆっくりと画像を切り替える以下のソースをネットで調べました。さらに実用的にするため、各画像にそれぞれ異なるリンクを貼りたいのですが、どのように追記すれば良いのでしょうか？色々試したのですが全く解決せず困っています。宜しくお願いいたします。 [以下ソース] <script type="text/javascript"> var imgs = new Array(); imgs[0] = "画像URL1"; imgs[1] = "画像URL2"; imgs[2] = "画像URL3"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,5*1000)} </script> <img src="画像URL１" style="filter:blendTrans(duration=2);">
- 締切済み
- JavaScript
一定時間で変化する画像とリンク
業者さんにトップのページを作成してもらいました。一定時間で画像が変化するようになっているのですが、その画像ごとにクリックした際に違うリンクを貼りたいのですが初心者の為、よくわかりません。下記ソースですがどこを編集したらよいのでしょうか？ 
- 締切済み
- JavaScript
Javascript スライドショー
Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。おそらく最後の $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } が上手く動いていないと思うのですが、よく分かりません。どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。よろしくお願い致します。 <script type='text/javascript'> var images=new Array(); images[0]='images/1.jpg'; images[1]='images/2.jpg'; images[2]='images/3.jpg'; images[3]='images/4.jpg'; var currentImage = 0; var preloaded=false; var preloading = false; function preload(){ preloading=true; for(var i=0; i<images.length; i++){ var img = new Image(); img.src=images[i]; images[i] = img; } preloaded=true; } function animateImages(){ // if already preloading, we just want to return nothing if(!preloaded && preloading) return; // if not preloaded, we want to preload if(!preloaded) preload(); // considering we have already loaded stuffs currentImage++; currentImage = currentImage % 4; $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } ); } </script>
- 締切済み
- JavaScript
IE10で画像切り替えがされません
いろんなサイトから情報を引っ張ってきて趣味程度でHPを作成しています。先日、IEを10にアップデートしました。おそらく、アップデートをきっかけに、今まで動作していた写真切り替えスクリプトが動作しなくなりました。他のPCではIE9を使用しており、今までどおり動作します。下記のようなスクリプトです。一定時間で画面が切り替わるようにし、各画像にリンクをはっていました。＜javascript部分＞ var href= new Array(); href[0]=""; href[1]="./aaa.html"; href[2]="./bbb.html"; href[3]="./ccc.html"; var BlendTrans_time=1; function go_BlendTrans(file_name) { BlendTrans_img.filters.BlendTrans.Apply(); BlendTrans_img.filters.BlendTrans.duration=BlendTrans_time; BlendTrans_img.src=file_name; BlendTrans_img.filters.BlendTrans.Play(); if(file_name == imgs[0]){lnk.href=href[0];} if(file_name == imgs[1]){lnk.href=href[1];} if(file_name == imgs[2]){lnk.href=href[2];} if(file_name == imgs[3]){lnk.href=href[3];} } var imgs = new Array(); imgs[0] = "00.JPG"; imgs[1] = "aa.jpg"; imgs[2] = "bb.jpg"; imgs[3] = "cc.jpg"; j = 0; function hyouji() { go_BlendTrans(imgs[j++]); if(j>=imgs.length) j=0; } function startfnc() { //関数hyouji()を5000ミリ秒間隔で呼び出す setInterval("hyouji()",5000); } ＜HTML部分＞ <a href="#" id="lnk"><img src="00.JPG" border="0" width="800" id="BlendTrans_img" style="filter:BlendTrans;"></a><br> いろいろ調べたのですが、IE10にアップデートしたことが原因という確証も得られませんでした。質問が複数で申し訳ないのですが、そもそも、IE10が上記のスクリプトをサポートしていないのでしょうか？また、IE10で動作しないのであれば、代替策はどのようにすればいいのでしょうか？
- ベストアンサー
- CSS
Javascript スライドショー
Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。おそらく最後の $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } が上手く動いていないと思うのですが、よく分かりません。どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。よろしくお願い致します。 <script type='text/javascript'> var images=new Array(); images[0]='images/1.jpg'; images[1]='images/2.jpg'; images[2]='images/3.jpg'; images[3]='images/4.jpg'; var currentImage = 0; var preloaded=false; var preloading = false; function preload(){ preloading=true; for(var i=0; i<images.length; i++){ var img = new Image(); img.src=images[i]; images[i] = img; } preloaded=true; } function animateImages(){ // if already preloading, we just want to return nothing if(!preloaded && preloading) return; // if not preloaded, we want to preload if(!preloaded) preload(); // considering we have already loaded stuffs currentImage++; currentImage = currentImage % 4; $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } ); } </script>
- 締切済み
- JavaScript