![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
閲覧ありがとうございます。
以下のサイトのように画像を順番にフェードインさせるJavascriptサンプルを探しています。
http://kimuratakahiro.com/portfolio.html
ソースを表示させて使用してもうまく表示されなかったので困っています。
jQueryの使用も試してみましたがロードなどの使い方がよくわかりません。DLはできています。
ただコピーペーストするだけでは機能は使えないのでしょうか?
使用ブラウザはクロームです。
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
#1です。
参考サイトのもので動作するはずですが、ご提示のHTMLはスクリプトタグの中にHTMLソースまで入れてしまっているのが間違いの元です。
HTMLはあくまでもbody内に直接記述してください。
少し内容を変えた例 :表示間隔の数字をかえることで間隔が変わります。
(処理内容はほとんど同じです)
(全角空白は半角に)
<!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">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$('.fade li').hide();
});
$(window).bind("load", function(){
var interval = 300; //表示間隔
for(var i=0; i<$('.fade li').length; i++)
setTimeout(doFade(i), interval * i);
function doFade(i){
return function(){ $('.fade li').eq(i).fadeIn(1000); };
}
});
//-->
</script>
</head>
<body>
<ul class="fade">
<li><img src="img/photo01.jpg" alt="photo1"></li>
<li><img src="img/photo02.jpg" alt="photo2"></li>
<li><img src="img/photo03.jpg" alt="photo3"></li>
<li><img src="img/photo04.jpg" alt="photo4"></li>
<li><img src="img/photo05.jpg" alt="photo5"></li>
</ul>
</body>
</html>
No.1
- 回答日時:
どのようなマークアップで何をしたいのかを明確にしないと…
fadeIn/Outのサンプルなら、検索をすれば解説サイトがたくさんあるかと思います。
<ごく一例>
http://ameblo.jp/linking/entry-10211188441.html
http://k-hiura.cocolog-nifty.com/blog/2010/06/jq …
http://www.atmarkit.co.jp/fdotnet/jqueryref/07ef …
jQueryそのものがよくわからない場合は、まずはそちらから
<ごく一例>
http://allabout.co.jp/gm/gc/39898/
http://www.openspc2.org/JavaScript/Ajax/jQuery_s …
>ただコピーペーストするだけでは機能は使えないのでしょうか?
まったく同じ構成で画像の内容が違うだけみたいな場合は、そのままのコピペでいけると思いますが、
そうでない場合は、コピー元がどのように(汎用的なものか否か)なっているかによって状況が変わります。
この回答への補足
参考URLありがとうございます。
http://www.skuare.net/2010/07/javascript_4.htmlを参考にしてマークアップしたものが以下です。
<html>
<head>
<title>TOP</title>
</head>
<body>
<br>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<ul class="fade">
<li><img src="画像1.png"></li>
<li><img src="画像2.png"></li>
<li><img src="画像3.png"></li>
<li><img src="画像4.png"></li>
</ul>
$(function(){
$('.fade li').hide();
});
var i = 0;
var int=0;
$(window).bind("load", function() {
var int=setInterval("doFade(i)",100);
});
function doFade() {
var list = $('.fade li').length;
if (i >= list) {
clearInterval(int);
}
$('.fade li').eq(i).fadeIn(1000);
i++;
}
</script>
</body>
</html>
表示させてみましたが真っ白の画面のままでした。
どうすればきちんと表示されるのでしょうか?
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- iPhone(アイフォーン) iPhoneのデータ通信、SIMカードについて質問です。 海外で使うためにSIMカードを変えたのです 2 2022/05/14 00:10
- CAD・DTP 「機能ブロック図」の描画用フリーソフトを教えてください 1 2022/09/23 16:12
- Chrome(クローム) おすすめのGoogle Chromeの拡張機能 スクリーンショットをを教えてください 1 2022/05/18 19:56
- その他(Microsoft Office) エクセルのマクロについて教えてください。 5 2023/01/21 09:39
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- 写真 写真(画像)編集スキルを質問する時 1 2022/12/07 14:14
- Gmail Gメールの受信トレイの表示が変わって、戸惑っています 1 2023/04/04 17:52
- 画像編集・動画編集・音楽編集 daVinciResolveの再生プレビュー画面がカクつきます。 daVinciResolve18を 2 2023/01/20 01:35
- モニター・ディスプレイ 新しいPCモニターの購入を考えています。株取引とFX取引。 4 2022/05/01 12:19
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
jQueryのclickイベントハンドラ
-
画像にマウスを乗せた時のJava ...
-
Dreamweaver上とデバイスプレビ...
-
エンドロールを枠の中で表示す...
-
Flickrのような綺麗なサムネイ...
-
キャラクターがぴょこんと飛び...
-
jspでcssが読み込めない
-
スクロール可能なチェックボックス
-
jQueryでネスト構造の<li>がク...
-
1枚の画像をクリックすると複数...
-
401エラードキュメントを401.ht...
-
変数名をどのようにつけるのが...
-
HTML id名とjavascript変数名
-
ディレクトリ内画像表示
-
【javascript で動的に a タグ...
-
オンマウスで、画像切り替え+...
-
IplImageをPictureBoxへ表示が...
-
PC設定に依存しない曜日判定JS...
-
特定の画像を非表示にする方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報