jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。自分なりに考えて作ってみたのですが、正しく機能しませんでした。どこをどのように修正すればランダムになるのでしょうか？ Simplest jQuery Slideshow 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; } 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 = " "; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); });

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

解決済

質問者：tekkenman7
質問日時：2011/03/26 22:12
回答数：1件

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ベストアンサー

回答者： fujillin
回答日時：2011/03/28 19:51

よくわかりませんが…

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);　　
　})();
});