![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
No.8ベストアンサー
- 回答日時:
エスパーです。
^^;あなたの さいてきちは、いかです。
var myspd = 25;
var myx = 10;
がぞうの さいずが おおきようなので りさいずします。
ぶらうざに ひょうじされる 画素数と 元の がぞうの 画素数を おなじに します。
/*
もしかのうであるのならば、
ういるす駆除けいの、ソフトをとりさります。
もっとも おすすめしたいのが、さいそくのマシンにこうかんすることです。
あと、わたしへの「ありがとうポイント」を MAX に!
(もちろん、じょうだんですが。)
*/
本当にお恥ずかしい限りです・・・・。
微妙な数字で調整し、その後500など極端に数字を上げたりして・・。
動きがカクカクに・・。
回答いただいた数値を入れる+画像サイズを下げる
をするとナント理想の動きになりました!!!
ありがとうございます・・・・・!!感謝です~!!
またお世話になるかもしれませんが懲りずによろしくお願いします・・・
No.7
- 回答日時:
だからそれはきっと、<style>~</style>ぶぶんのなかに、ぜんかくくうはくがあるから。
(きっとおれは、エスパーにちがいない。)
この回答への補足
エスパーです!
全くその通りでした・・・!
ありがとうございます!
ただ・・IEではスピードが異様に遅くfirefoxとクロームでも遅めなのです・・・
改善方法がございますでしょうか?
下記の様に設定しています。
var myspd = 1; // 変化する速さ(ミリ秒単位)
var myx = 1; // 何%ずつ変化させるか
何度も何度も本当に申し訳ございません・・・
No.6
- 回答日時:
こんにちは。
>ただ、<ul>のIDを(fade)に設定したいのですが
<ul id="fade">だとした場合
<script type="text/javascript">
$().ready ( function() {
$('#fade li').each ( function(index) {
$(this).delay(index*1000).fadeIn();
});
});
</script>
で動きます。
#fade liとすることでid="fade"内のliという指定になります。
この回答への補足
ありがとうございます!
IDを設定したところ見事3枚の画像は重い通りの動きをしてくれたのですが
同ページの下部コンテンツにて下記URLの様なJqueryの
ギャラリーを設置しています。
http://www.twospy.com/galleriffic/example-2.html
こちらが表示されなくなってしまいました・・。
ソースが喧嘩している状態なのでしょうか・・
何度もすみません・・!一度みていただけますでしょうか。
こちらも簡単でとても使いやすそうでした!!
ソースが喧嘩しないように改造出来るように
勉強します・・・!
私の力不足でした・・・。ソースをいただいて解析したいと思います。
ありがとうございました!
No.5
- 回答日時:
それはきっと、<script>~</script>ぶぶんを、<head>内にうつしたから。
この回答への補足
ありがとうございます!
そのように設定したら画像は表示されたのですが
一番左の画像(px1)のみが綺麗にフェードインで表示され、
後の二枚はすでに表示されている状態からパっと一瞬消えて
フェードインが始まりました。
原因を探りましたが情けない事に全く分かりませんでした~・・
No.4
- 回答日時:
ぜんかくくうはくは、はんかくに。
<!DOCTYPE html>
<title></title>
<meta charset="UTF-8">
<style>
#hoge li img {
opacity : 0;
filter : alpha(opacity=0);
}
</style>
<body>
<ul id="hoge">
<li><img src="image/mainpx_01.jpg" id="px1" width="365" height="484">
<li><img src="image/mainpx_02.jpg" id="px2" width="365" height="484">
<li><img src="image/mainpx_03.gif" id="px3" width="270" height="484">
</ul>
<script> // 画像のフェードイン・フェードアウト
var myspd = 5; // 変化する速さ(ミリ秒単位)
var myx = 1; // 何%ずつ変化させるか
var mypic = ["px1","px2","px3"]; // 画像のname(順番に並べる)
var mycnt = 0;
var myp = 0;
function mygo() {
var s = document.getElementById (mypic[myp]).style;
if (100 < mycnt)
mycnt = 100;
s./*@cc_on @if(1)filter = 'alpha(opacity='+ mycnt+ ')' @else@*/ opacity = (mycnt / 100) /*@end@*/;
mycnt += myx;
if (mycnt == 100) {
mycnt = 0;
myp++;
}
if (myp < mypic.length)
setTimeout (mygo, myspd);
}
mygo ();
</script>
この回答への補足
ありがとうございました!
やってみましたが画像が表示されずに真っ白になってしまいました・・
なんででしょうか~もう全く分かりません・・・
No.3
- 回答日時:
こんにちは。
こんな感じでしょうか?
http://hppg.moe.hm/okwave/qa/q7728418/
jQueryを利用できれば比較的簡単なソースで実装できます。
リンク先からソースを見てみてください。
この回答への補足
動きはまさにそんな感じです!
ただ、<ul>のIDを(fade)に設定したいのですが
<script type="text/javascript">
$().ready ( function() {
$('ul li').each ( function(index) {
$(this).delay(index*1000).fadeIn();
});
});
</script>
ここの個所で設定するのでしょうか?
何も知らなくてすみません・・
JsでのIDの設定の仕方をご教授いただいてもよろしいでしょうか?
No.2
- 回答日時:
>>1です。
フェードインするだけで前の画像はそのまま残るということでしょうか?
スライドではなくフェードインですよね?
一定時間で前の画像がフェードアウトし、代わりに前の画像が表示されていた
場所にフェードインする、いわゆるクロスフェードタイプのことを
おっしゃっているのではないですか?
ちなみにスライドとは、画像が何枚か並んでいて、それが横に動いて
次の画像を表示させるものを言います。
こういうのがクロスフェード
http://exyz.cocolog-nifty.com/good_sleep/2009/02 …
こういうのがスライド
http://black-flag.net/jquery/20120215-3671.html
どちらが必要かはわかりかねますが、こういうのでよろしいでしょうか?
この回答への補足
3枚横並びの画像が順にフェードインで現れてフェードアウトで消えずに
そのまま残った状態です。
シンプルな動きなのに難しいです~!
LancerVIIさんの欄に記載されているURLの動きです~。
No.1
- 回答日時:
ありがとうございます。
こちらも確認したのですが、3枚横並びでシンプルに時間差でフェードイン
といったサンプルが無かったのです・・
なかなか無いものですね・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- 占い タロットカードを浄化していたら、引くように言われたので引いたのですが… 1 2022/09/02 06:32
- ガーデニング・家庭菜園 この木の名前を教えてください【画像3枚、一括投稿】 5 2022/04/22 11:16
- YouTube youtubeのTOPページの動画紹介画面の並び方を変えたいです。 1 2023/03/18 09:25
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- Windows 10 win10のゲームバー 使用方法 1 2022/05/22 13:31
- 画像編集・動画編集・音楽編集 daVinciResolveの再生プレビュー画面がカクつきます。 daVinciResolve18を 2 2023/01/20 01:35
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
順番にクラスをつけていく方法
-
楽天APIのデータをjqueryのgetJ...
-
Flickrのような綺麗なサムネイ...
-
画像にマウスを乗せた時のJava ...
-
Dreamweaver上とデバイスプレビ...
-
jQueryのclickイベントハンドラ
-
javascriptテキストBOX色を元に...
-
javascriptで毎月替わる画像
-
eclipseでcssを使うためには?
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
-
JavaScript 可変スクロールバ...
-
onmouseover、onmouseoutの仲間...
-
1行で左寄せと右寄せと中央揃え...
-
IFRAMEの表示/非表示を切り替え...
-
jspでcssが読み込めない
-
this.src等のthisについて
-
タブで開いてさらにタブ内をア...
-
OpenCVを用いたヒストグラムの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報