- ベストアンサー
数秒毎に自動で画像をフェードイン・アウトする方法
- 数秒毎に自動で画像をフェードイン・アウトする方法を紹介します。
- 以下のサンプルを使用して、自動で画像のフェードイン・アウトを行うことができます。
- 画像の切り替わりを表現したい場合は、「▼▼メイン画像▲▲」の部分を変更してください。
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
http://www.geocities.jp/margin0px/sample/slideshow.html ↑こちらのページの冒頭に書いてあります。 以下引用 -------------------------------------------------------------- <head>～</head>間に <script src="./sc/slideimage.js" type="text/javascript"></script>←これ <script src="./sc/slideshow.js" type="text/javascript"></script>←これ <link href="./sc/fadeshow.css" rel="stylesheet" type="text/css"> <body>～</body>間の表示したいところに <div class="centerdiv"> <script src="./sc/fadeshow.js" type="text/javascript"></script>←これ </div> -------------------------------------------------------------- 「←これ」と、書き足した部分がjavascriptを読み込む記述です。
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
↓をコピペ（投稿サイズぎりぎり、よってコメント無し） （行頭の全角空白は削除せよ！） （予めslideshow.jsをサンプルサイトより入手しておくこと！） （ファイルのパスはあなたのサイトに合わせること！）」 <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>FLOWER GARDEN</title> <link href="components/css/default.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .centerdiv{text-align: center;} .centerdiv>div{margin: 0 auto;} </style> <script type="text/javascript"> var fadeimages=new Array(); fadeimages[0]=["img/img_01.jpg","",""]; fadeimages[1]=["img/img_02.jpg","",""]; fadeimages[2]=["img/img_03.jpg","",""]; fadeimages[3]=["img/img_04.jpg","",""]; var fadebgcolor="#ffffff"; </script> <script src="slideshow.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <div id="header"> <div id="head_logo"> <a href="index.html"><img src="img/head_logo.gif" alt="head_logo" border="0" /></a> </div> <div id="head_right"> <h1>想いを花に乗せて・・・・・・フラワーギフトのFLOWER GARDEN</h1> <h2>Tel.03-1234-5678｜営業時間 11:00～23:00</h2> </div> </div> </div> <div id="main_vis"> <div class="centerdiv"> <script type="text/javascript"> new fadeshow(fadeimages, 800,380,0,3000,0); </script> </div> </div> <div id="menubar"> <div id="menubar_wrap"> <a href="index.html" class="menu_a">Home</a> <a href="concept.html" class="menu_a">Concept</a> <a href="pickup.html" class="menu_a">Pick Up</a> <a href="menu.html" class="menu_a">Menu</a> <a href="shop.html" class="menu_b">Shop</a> </div> </div> <div id="content"> <div id="content_wrap"> <h2>[ --- information --- ]</h2> <div id="copy">誕生日や記念日にフラワーギフトを贈りませんか？<br />当店ではオリジナルのフラワーアレンジメントを承っています。 </div> </div> </div> <div id="footer">2009 FLOWER GARDEN</div> </body> </html>
- reggaepunc
- ベストアンサー率59% (64/108)
.jsファイルを読み込んでますか？ javascriptファイルを読み込んでないように見えますが。
お礼
回答していただきありがとうございます。どのようにすれば、ｊｓを読み込めるのでしょうか？現在確認したところ、画像が表示されるはずの所に、白地に赤の×が表れます。クリックするとyahooやgoogleといったリンク先には飛べる状態になっているようです。
お礼
わざわざご回答頂きありがとうございます。多分回答していただくのは二度目ですよね？いつもありがとうございます。パソコン上では変だったのですが、サーバーにアップしたら解決しました。お付き合い頂きありがとうございました。