• 締切済み
  • 暇なときにでも

スライドショーにフェードイン・アウト効果

javascriptのスライドショーにフェードイン・アウト効果をつける方法をご教授いただきたいのですが、どなたかよろしくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数713
  • ありがとう数2

みんなの回答

  • 回答No.1
  • hrm_mmm
  • ベストアンサー率63% (292/459)

ie限定ならfilter効果で、できそうかも。 または、レイヤークリップで、表示領域を拡大縮小すれば、 フェードイン、フェードアウトしているように見せかけることは出来るでしょう。 で、レイヤーを2枚使って、入れ替えていけば、紙芝居のような感じに作れそうです。 とりあえず、かいつまんで以下のような感じに <script type="text/javascript"> var ImageMax = 5; var ImageNum = 0; var sjpg = new Array(ImageMax); //画像を入れて置く 省略 var zMax = 100; function autoslideshow(){ ImageNum ++ ; if(ImageNum>= ImageMax){ ImageNum = 0; return; }else { cnum = (ImageNum-1) % 2; // div tag id_num ImgNum = (ImageNum<ImageMax-1)? ImageNum+1 : ImageNum; cliper(cnum,ImgNum,5,5); //present clip and next img(present+2) timer = setTimeout("autoslideshow()",10000); } } // slide div tag size and position var s_width = 490; var s_height= 370; var s_top = 100; var s_left =30; // cnum:clip対象div_id_num, // ImgNum:そのdiv(レイヤー)に入れる次のimg_Num(現在+2), // frm:分割数, frc:分割減数カウント function cliper(cnum,ImgNum,frm,frc){ frc --; if(frc>0){ clip_id = "s" + cnum; clip_size= frc *( s_width / frm ); clip_left= s_width - clip_size; o_left = s_left - clip_left; // 左へずらす if(document.getElementById){ obj = document.getElementById(clip_id).style; obj.clip = "rect(0,"+s_width+","+s_height+","+clip_left+")"; obj.left = o_left ; }else{ return; // とろあえず、ie5.5、nescape7のみ対応 } c_timer = setTimeout("cliper("+cnum+","+ImgNum+","+frm+","+frc+")",5000/frm); }else{ clip_clr(cnum,zMax-ImgNum,ImgNum); // 裏に回して、画像入れ替え、表示サイズを戻す。 } } function clip_clr(cnum,zi,ImgNum){ clip_id = "s" + cnum; if(document.getElementById){ obj = document.getElementById(clip_id).style; obj.clip = "rect(0,"+s_width+","+s_height+",0)"; obj.zIndex = zi obj.left = s_left; img_name = "slideimg"+ cnum; document.images[img_name].src = sjpg[ImgNum].src ; } } </script> <form><input type="button" onClick="autoslideshow()"></form> <div id="s0" style="略"><img src="0.gif" name="slideimg0"></div> <div id="s1" style="略"><img src="1.gif" name="slideimg1"></div> 2個のdivタグレイヤーをstylesheet指定で同じ位置に置く,position:absoluteを必ず指定のこと。 layers[].clipを使えばnn4.xにも対応可能ですけど、ちょっとスクリプトサイズが大きくなります。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

hrm_mmさま 遅くなってすみません。 参考にさせていただきます。 ありがとうございました。

関連するQ&A

  • aviutlの動画にフェードイン・アウトの効果をつけるにはどうすればい

    aviutlの動画にフェードイン・アウトの効果をつけるにはどうすればいいでしょうか? あと字幕の入れ方について詳しく記載されているサイトがあれば教えてほしいです 取扱説明書のようなものがあればいいのですが…

  • UleadVideoStudio8se でフェードイン/アウトが出来ない?

    UleadVideoStudio8se でフェードイン/アウトが出来ません。 というか、方法が分りません。 フェードイン/アウトと書かれたボタンは左上の方にあるのですが、 クリックしても何も変わらないようです。 どうしたら、いいのか教えてくださいませ。 よろしくお願いします。 CyberLinkPowerDirector3もありますが、これもよく分りません。

  • フェードイン・アウトについて

    Flash8を使用しています。 矩形のシンボルを右端から徐々にフェードイン・アウトさせていくアクションスクリプトを作りたいのですがどうすればいいのでしょうか・・・? 今の説明が分かって頂き回答していただけたら嬉しいです。

    • ベストアンサー
    • Flash
  • サウンドのフェードイン・アウト

    製作環境はXPのMXです。 サウンドをattachSoundでライブラリから呼び出して流しているのですが、一番最初にフェードインさせて流したいときはどのように書けばいいでしょうか? また、on/offボタンを設置していて、今はstart/stopで制御しているのですが、これもフェードイン・アウトさせるようにしたいのですが、どう書けばいいしょでしょうか? 詳しい方がいましたら教えてください。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • リンクをマウスオーバーでフェードイン・アウトがしたです。

    リンクをマウスオーバーでフェードイン・アウトがしたです。 以下のようなソースを書いたのですが、ページを開いた1回目のみ、画像と文字がフェードインして、以下のリンクをマウスオーバーした時には、普通に画像と文字が入れ替わります。リンクをマウスオーバーした時にもフェードイン・アウトさせるには、どのように変更すればいいのでしょうか? <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div').fadeIn("slow"); }); </script> <head> <body> <div style="display:none;"> <img src="img/1.png" name="foo"> <br> <span id="buntate">眺める</span> </div> <a href="javascript:void(0)" onmouseover="document.foo.src='img/2.png';document.all.buntate.innerText='サーファー';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge1</a> <br> <a href="javascript:void(0)" onmouseover="document.foo.src='img/3.png';document.all.buntate.innerText='海';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge2</a> </body> </html> 沢山いろいろと試したのですが、自分で解決出来ず・・・ ごご教授、よろしくお願いいたします。

  • 自動でフェードインアウトしながら切り替わるスライド

    ページを開くと自動でフェードインアウトしながら画像が切り替わる スライドを作る方法を教えて下さい。 何とか自動でスライドが切り替わるところまでは出来たのですが、 どうしても各画像のフェードインアウトが出来ません。 現在のソースは次の通りですが、 どこをどう書き直せば、自動でフェードインアウトしながら 画像が切り替わるスライドになるでしょうか、教えて下さい。 ちなみにホームページは「GoLive CS」を使っています。 宜しくお願い致します。 -- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <meta name="generator" content="Adobe GoLive"> <title>top_slide</title> <csactionitem name="CAA02A021"></csactionitem> <csactions> <csaction name="CAA02A021" class="SlideShowAuto" type="onload" val0="_01" val1="10" val2="3" val3="false"></csaction> </csactions> <csscriptdict import> <script type="text/javascript" src="../GeneratedItems/CSScriptLib.js"></script> </csscriptdict> <csactiondict> <script type="text/javascript"><!-- CSInit[CSInit.length] = new Array(CSSlideShowAuto,/*CMP*/ '_01',10,3,false); // --></script> </csactiondict> </head> <body onload="CSScriptInit();" bgcolor="#ffffff"> <p><img src="../Images/top_slide_images/01.jpg" alt="" name="_01" width="500" height="375" border="0"></p> </body> </html>

    • ベストアンサー
    • CSS
  • スライドショーのフェードイン・フェードアウト★12日01時まで

    下記URLに掲載されているスライドショーの写真をフェードインフェードアウトした形で表示をさせたいです。 今夜1時までに修正しなくてはいけないのですが、うまくできず困っています。 お手数ですが、修正方法を教えてください。 【フェードインフェードアウトさせたいスライドショー】↓   http://www.adobe.com/jp/support/flash/applications/jpeg_slid eshow_xml/index.html 【フェードインフェードアウトさせたいスライドショーのソース】↓ http://www.adobe.com/jp/support/flash/applications/jpeg_slid eshow_xml/jpeg_slideshow_xml06.html 【制作参考スライドショー】(こんな感じに変更したいのですが、ソースのどこを組み込んでいけばよいのかわからないので教えてください)↓ http://www.mediacreator.jp/misc_examples/flash8/blur_slidesh ow.html (ソースダウンロード場所→http://www.mediacreator.jp/downloads/index.asp 内のFlash8のぼかしフィルタJPGスライドショー:blur_slideshow.zip)

    • ベストアンサー
    • Flash
  • フェードイン・アウトについて

    アクションスクリプトを使用して、 ムービークリップをフェードインさせ 一定時間後にフェードアウトさせることは可能でしょうか? ご存知の方いらっしゃいましたら、 回答宜しくお願いします。 環境: Win XP FlashMX

  • ホームページビルダーのフェードイン効果

    ホームページビルダー10のフェードイン効果について教えてください。 画像を背景にしているのですが、画像をクリックしてリンクするとき画像ごとフェードインまたはフェードアウトすることは可能でしょうか? やり方や設定の仕方がわかる人いましたらおしえてください。

  • プレミアエレメンツ2.0のフェードイン.アウトについて

    早速プレミアエレメンツを購入して動画編集にチャレンジしているものです。始まりと終わりにフェードイン.アウトをしてみましたが、色は黒しかできないのでしょうか?できれば白にしたいのですが教えてください