jqueryのスライドショー。htmlに画像1枚で

解決済

質問者：tekkenman7
質問日時：2011/03/30 21:41
回答数：2件

jquery-1.5.1.min.jsを使ってjpg画像を
ランダムにスライドショーさせるプログラムで、
下記ポイントを満たしたプログラムへ変えたいです。

・scriptが機能しない場合には画像がちゃんと表示される
・html上にスライドショーに使う画像を並べない（下記コード参考＝【画像多いバージョン】）
・修正するコードは【画像1枚バージョン】

よろしくお願いします。

【画像1枚バージョン】
<script type="text/javascript">
$(function(){
　var elm = $(".fadein");
　elm.children("img").hide();

　(function(){
　　var img = elm.children("img:hidden");
　　elm.children("img:not(hidden)").fadeOut(1000);
　　$(img.get(Math.floor(Math.random() * img.length))).fadeIn(500);
　　var id = setTimeout(arguments.callee, 5000);　　
　})();
});
</script>

<div class="fadein">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>

【画像多いバージョン】
<script type="text/javascript">
imgLength = 20;
firstInt = 1;
imgChangeSpeed = 5000;
imgExtension = ".jpg";
imgDirectory = "img/";

randomInt = firstInt + 1;

$(function(){
var t = setInterval(loadImg, imgChangeSpeed);
function loadImg(){
$("#gallery").children("img").animate({'opacity':'0'}, 0)
$("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 1000);

if(randomInt < imgLength){
randomInt = parseInt(randomInt) + 1;
}
else{
randomInt = 1;
}
}
});
</script>

<div id="gallery">
<img src="img/1.jpg" />
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2011/03/30 22:40

記述したいマークアップと、その上で行ないたい処理や条件等を明確にして質問しないと、なかなか思う通りのものは入手できないかも。

http://oshiete.goo.ne.jp/qa/6623078.html　でご質問に提示なさっているような回答をしたのは、HTMLとスクリプトとで画像のurlをダブって持っているたからで、HTMLに記述したくないのであれば、q6623078のご質問文のスクリプトのようにスクリプト内で定義しておけばよろしいかと。
さらには、今回のご質問のように規則性のある連番での画像名に限定できるのならば、スクリプトで定義しなくてもスクリプトに生成させることが可能です。ご提示の『【画像多いバージョン】』はその方法をとっています。
（ＨＴＭＬ内に記述しても、CSSでdisplay:noneで非表示にするという方法もありますが…）

ご提示の【画像多いバージョン】では、変数randomIntがランダムと名がついているものの1ずつ順番に増やしていくようになっているので、そこの部分をランダムにしてあげればよろしいかと思われます。
ランダムな数字を取得する方法は、q6623078のご質問文に提示なさっている方法とその回答に記した方法も同じですので、それを利用すれば良いのではないでしょうか。

- 0
- 件

通報する

この回答へのお礼

何度も有難うございます。
<head>
<script src="loading.js" type="text/javascript"></script>
</head>
<body>
<div id="gallery">
<img src="img/1.jpg" />
</div>
</body>

【loading.jsの中身】
imgLength = 20;
firstInt = 1;
imgChangeSpeed = 5000;
imgExtension = ".jpg";
imgDirectory = "img/";

randomInt = firstInt +

$(function(){
　var elm = $("#gallery");
　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);　　
　})();
});
;

$(function(){
var t = setInterval(loadImg, imgChangeSpeed);
function loadImg(){
$("#gallery").children("img").animate({'opacity':'0'}, 0)
$("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension

}).animate({'opacity':'1'}, 1000);

if(randomInt < imgLength){
randomInt = parseInt(randomInt) + 1;
}
else{
randomInt = 1;
}
}
});

このように作ってみました。
randomInt = firstInt + 1　の1の部分を
前回のコードをコピーしました。
しかし、動きが少しおかしいです。
フェイドインの時間が安定しない、や
1番目が連続で何度も表示される、などです。

どこが間違っているのですか？