-PR-
  • すぐに回答を!
  • 質問No.6623078
解決
済み

ランダムなフェードインを作りたいです。

  • 閲覧数469
  • ありがとう数6
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 70% (150/212)

jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル
http://jsajax.com/articles/jQuerySimplestSlidesh
の画像を順番通りでなくランダム表示に修正したいです。

自分なりに考えて作ってみたのですが、正しく機能しませんでした。
どこをどのように修正すればランダムになるのでしょうか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simplest jQuery Slideshow</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.
<script type="text/javascript">
var imglist = new Array(
"http://farm3.static.flickr.com/2610/4148988872_9
"http://farm3.static.flickr.com/2597/4121218611_0
"http://farm3.static.flickr.com/2531/4121218751_a
var select = Math.floor((Math.random() * 100)) % imglist.length;
var t0 = "<img src='"+imglist[select]+"' border='0' >";

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut()
.next('t0').fadeIn()
.end().appendTo('.fadein');
}, 3000);
});
</script>

</head>
<body>
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" />
<img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" />
<img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" />
</div>
</body>
</html>
通報する
  • 回答数1

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

よくわかりませんが…

1)mglistを配列で定義しているけれど、対象の画像は全てHTMLソース内に
 あるみたいなので、不要ではないでしょうか?

2)変数selectを乱数で発生させているけれど、最初の一回だけなので、「表示する
 画像」をランダムに選択していることにはならないのでは?

3)変数t0にはタグの文字列が入るけれど、jqueryのセレクタにはならないのでは?
 (そもそも、selectもt0も固定で変化しないみたいだし)

4)画像要素の順序を移動しているみたいですが、表示する画像は1個だけなので
 順序を移動しなくても良さそうに思えますが?
 (半透明状態だと、前後どちらにあっても透過して見える)


setIntervalにはしていませんが(←最初の処理にタイムラグが出るので)、こんなのでは?
(全角空白は半角に)
$(function(){
 var elm = $(".fadein");
 elm.children("img").hide();

 (function(){
  var img = elm.children("img:hidden");
  elm.children("img:not(hidden)").fadeOut();
  $(img.get(Math.floor(Math.random() * img.length))).fadeIn();
  var id = setTimeout(arguments.callee, 3000);  
 })();
});
お礼コメント
tekkenman7

お礼率 70% (150/212)

ランダムになりました。ありがとうございます。
投稿日時 - 2011-03-30 21:39:18
-PR-
-PR-
  • 回答数1
このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ