自動でフェードインアウトしながら切り替わるスライドを作成する方法
- ページを開くと自動でフェードインアウトしながら画像が切り替わるスライドを作成する方法について教えて下さい。
- 現在のソースで自動でスライドが切り替わることはできますが、各画像のフェードインアウトがうまく動作しません。
- GoLive CSを使用しているホームページで、自動でフェードインアウトしながら画像が切り替わるスライドを実現する方法を教えてください。
- ベストアンサー
自動でフェードインアウトしながら切り替わるスライド
ページを開くと自動でフェードインアウトしながら画像が切り替わる スライドを作る方法を教えて下さい。 何とか自動でスライドが切り替わるところまでは出来たのですが、 どうしても各画像のフェードインアウトが出来ません。 現在のソースは次の通りですが、 どこをどう書き直せば、自動でフェードインアウトしながら 画像が切り替わるスライドになるでしょうか、教えて下さい。 ちなみにホームページは「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>
- izou14dai
- お礼率100% (5/5)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいなので… ＞自動でフェードインアウトしながら画像が切り替わる ＞スライドを作る方法を教えて下さい 原理的にはパラパラアニメみたいにして、少しずつ違う画像を表示してゆくことで実現可能です。 大抵はjavascriptなどを利用しています。（フラッシュでも可能） ご提示のソースでもスクリプトを利用している様なので、javascriptでよいものと仮定して… フェードイン/アウトの場合は、画像はそのままで透明度を少しずつ操作してあげればよろしいかと。 基本的な考え方はこんな感じでしょうか。 http://javascript.eweb-design.com/0814_fio.html 上記はIE専用なので、クロスブラウザにするとこんな感じ。 http://okwave.jp/qa/q5632833.html 便利なライブラリがいろいろ出来ていますので、そのようなものを利用すればもっと簡単になります。 （jQuery利用の例） http://okwave.jp/qa/q6003230.html 「フェードイン javascript」などをキーに検索すればたくさんのライブラリやサンプルが見つかるはずですので参考になるかと思います。
関連するQ&A
- 画像をフェードアウト＆フェードインで切り替えたい
jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){ $("#cat-list a").click(function(){ $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); $("p#cat-name").text($(this).text()); return false; }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list"> <li><a href="images/cat01.jpg">ネコ1</a></li> <li><a href="images/cat02.jpg">ネコ2</a></li> <li><a href="images/cat03.jpg">ネコ3</a></li> <li><a href="images/cat04.jpg">ネコ4</a></li> <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。
- ベストアンサー
- JavaScript
- ご指摘下さい！どこが間違っているのか…窓の自動リサイズ法です。
こんばんわ！ いきなりですが、いろんな方にアドバイスをいただいて自分なりに 作ってみたのですが、窓の自動リサイズができません。 「更新」やこのページに飛んできたとき、などなど、 そのようなときに自動的に窓が720*580の大きさになるなどというのは もしかして不可能ですか？ どなたか教えて下さい！ <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME="" > <META NAME=""> <META NAME=""> < http-equiv="refresh" conten="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){ window.resizeTo(720,580); } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML>
- ベストアンサー
- JavaScript
- 画像の下のテキストにフェードアウト後入力したい
フェードインした画像の下にテキストボックスがあり画像フェードアウト後にそのテキストに 入力したいのですができません。 フェードアウト後に優先順位などを変更するなどの回避策はありますか? 今の状態を簡素にしたもののソースを記載します。 ----- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><test>画像優先順位変更</TITLE> <!-- saved from url=(0014)about:internet --> <Script Language="JavaScript"> moveTo(30,30); resizeTo(1050,750); // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔（ミリ秒単位） ntc = 5; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd);} // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } </SCRIPT> </HEAD> <BODY onload="fdInImg('1gif')"> <IMG SRC="1.gif" name="1gif" border="0" style="top:30;left:100;filter:alpha(opacity=0);position:absolute"> <Input type="button" onclick="fdOutImg('1gif')" value="FdOut"> <table> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> </table> </BODY> </HTML> ------------------
- ベストアンサー
- JavaScript
- crossSlideがうまく機能しないです；
簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- JavaScript
- スライドショーにフェード効果と再ランダム表示を…
前回、重複しない画像選びを教えて頂き、その後の続きを頑張ってみましたが 策が尽きてしまいました。皆様のお力をお借りできないでしょうか。 【※現在の状況】 ・[A]→[B1]→[B2]→[C]の順番で再生 ・[A] [C]は固定（指定）画像を表示、[B1] [B2]はB1～5.jpgの中からランダムに表示し、重複選択を回避しています。 上記にさらに下記機能をプラスしたいと思っております。 【実現したいこと】 ・クロスフェード（またはフェードイン、アウト）を実装したい。 ・初回再生時にランダムで取得した画像を、リピート再生時にもう一度ランダム読込み表示させたい。 形式は上記内容を踏まえた物であれば、まったく違うものになっても構いません。 どうか助けて頂けないでしょうか。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SLIDESHOW</title> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.js"></script> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- var imgA = ["images/A.jpg"], imgB = new Array(); imgB[0] = "images/B1.jpg"; imgB[1] = "images/B2.jpg"; imgB[2] = "images/B3.jpg"; imgB[3] = "images/B4.jpg"; imgB[4] = "images/B5.jpg"; var n1 = Math.floor(Math.random()*imgB.length); while ( true ) { var n2 = Math.floor(Math.random()*imgB.length); // n1とn2がちがっていればループ終了 同じの場合はもう一度ランダム実行 if ( n1 != n2 ) break; } imgC = ["images/C.jpg"]; cnt = 0; interval = 1000; function img_slide(){ //以下枚数分繰り返し if(cnt==0) {document.show.src=imgA; cnt++; }else if(cnt==1) {document.show.src=imgB[n1]; cnt++; }else if(cnt==2) {document.show.src=imgB[n2]; cnt++; }else if(cnt==3) {document.show.src=imgC; cnt=0; } } function img_move(){ img_slide(); timerID = setTimeout("img_move()",interval); } // --> </SCRIPT> </head> <body onload="img_move()"> <div> <img src="images/A.jpg" name="show" width="300" height="250" > </div> </body> </html>
- ベストアンサー
- JavaScript
- 自動ログイン
楽天市場に出店しているのですが 管理画面のｒｍｓに毎回ログインするのが面倒なので 自動にログインできるのはないかといろいろ調べました。 YAHOOのメールには一発でログインできるようには下記のように HTMLを作成しできるようになりましたが 楽天のｒｍｓにhttps://glogin.rms.rakuten.co.jp/?sp_id=1 一発ログインできるようにしたいのですが よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-script-type" content="text/javascript"> <title>Yahoo!メール 自動ログイン</title> </head> <body onLoad="document.AutoLogOn.submit()"> <form action="https://login.yahoo.co.jp/config/login" method="post" name="AutoLogOn"> <div> <input type="hidden" name=".done" value="http://mail.yahoo.co.jp"> <input type="hidden" name="login" value="Yahoo! JAPAN ID"> <input type="hidden" name="passwd" value="パスワード"> </div> </form> </body> </html>
- 締切済み
- Windows Vista
- 続・背景と連動するスライドギャラリープラグイン
恐れ入ります。 昨日も投稿しましたが、少々不具合が出ましたので再度ご質問させて頂きます。 昨日の投稿はこちらです。 http://okwave.jp/qa/q7348102.html ご返答頂いた事で解決した様に思えましたが、不具合が見つかりましたので何とか解決策が頂けたらと思います。 不具合としては、作成したページのスライドギャラリーが隠れるくらい下の方へ行くと、スライドショーで画像が切り替わるたびにスライドギャラリーまで自動的に戻ってしまいます。 例えば５秒で切り替わるとすると、ページの下の方は５秒間しか見れない状態になってしまいます。 これではかなり問題ありなので、何とか修正をしたいのですが解決策が分かりません。 下記に使用したhtml、css、jQueryを記載します。 何かお分かりの方、よろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #slides div.slide { height:300px; width:100%; background-repeat:no-repeat; background-position:top center; } #slides div.caption { position:relative; width:600px; height:300px; margin: 0 auto; } #slides div.content { position:absolute; right:0; bottom:0; width:200px; height:100px; background-color:#fff; border:4px solid #ddd; padding:30px; font-weight:bold; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> </head> <body> <div> <div id="slides"> <div class="slide" style="background-color:#776; background-image:url(img/photo01.jpg);"> <div class="caption"><div class="content">コメント1</div></div> </div> <div class="slide" style="background-color:#e84; background-image:url(img/photo02.jpg);"> <div class="caption"><div class="content">コメント2</div></div> </div> <div class="slide" style="background-color:#abb; background-image:url(img/photo03.jpg);"> <div class="caption"><div class="content">コメント3</div></div> </div> </div> </div> <script type="text/javascript"> <!-- $("#slides div.slide").hide().filter(":first-child").show(); var interval = setInterval(function(){ var elm = $("#slides div.slide:visible").hide().next(); (elm.length?elm:$("#slides div.slide:first-child")).fadeIn(1000); }, 4000); //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- 背景に指定したイメージ以外の余白を見せないようにする方法は？
こんにちは！まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){ window.resizeTo(720,580); } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか？ お願いします☆
- ベストアンサー
- HTML
- METAタグについて
HPに以下の様な記述をしたのですが、gooやinfoseekに登録して１週間経ても、全く検索されません。 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="index,follow"> <meta name="keywords" content=""> <meta name="description" content=""> 正しい記述方法について、何方か教えて下さい。
- ベストアンサー
- HTML
お礼
何分初心者な為、分からないことが多く、 正直、まだ解決できていませんが、 自身のスキルアップの為に参考にさせて頂きます。 有り難うございました。