Javascript スライドショー

締切済

質問者：hirojuille
質問日時：2011/03/23 09:21
回答数：2件

Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。
おそらく最後の
$('#rotatingimage').fadeOut(1000,function(){
$(this).attr('src',images[currentImage].src);
$(this).fadeIn();
}
が上手く動いていないと思うのですが、よく分かりません。
どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。
よろしくお願い致します。

<script type='text/javascript'>
var images=new Array();
images[0]='images/1.jpg';
images[1]='images/2.jpg';
images[2]='images/3.jpg';
images[3]='images/4.jpg';

var currentImage = 0;
var preloaded=false;
var preloading = false;

function preload(){
preloading=true;
for(var i=0; i<images.length; i++){
var img = new Image();
img.src=images[i];
images[i] = img;
}
preloaded=true;
}

function animateImages(){
// if already preloading, we just want to return nothing
if(!preloaded && preloading) return;

// if not preloaded, we want to preload
if(!preloaded) preload();

// considering we have already loaded stuffs
currentImage++;
currentImage = currentImage % 4;

$('#rotatingimage').fadeOut(1000,function(){
$(this).attr('src',images[currentImage].src);
$(this).fadeIn();
}
);
}
</script>

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： yyr446
回答日時：2011/03/23 13:08

勝手にjQueryだと思い込んで↓でどうでしょう。

3秒ごとに永久に変わり続けます
（行頭の全角空白は取り除いてください）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>gomi</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");</script>
<script type="text/javascript">
$(function(){
　var images=new Array();
　images[0]='images/1.jpg';
　images[1]='images/2.jpg';
　images[2]='images/3.jpg';
　images[3]='images/4.jpg';
　var currentImage = 0;
　var preloaded = false;
　var preloading = false;

　function preload(){
　 preloading=true;
　 for(var i=0; i<images.length; i++){
　　 var img = new Image();
　　 img.src=images[i];
　　 images[i] = img;
　 }
　 preloaded=true;
　}

　function animateImages(){
　 if(!preloaded && preloading) return;
　 if(!preloaded) preload();
　 $('#rotatingimage').fadeOut(1000,function(){
　　 currentImage++;
　　 currentImage = currentImage % 4;
　　 $(this).attr('src',images[currentImage].src);
　　 $(this).fadeIn();
　 console.log($(this).attr('src'));
　 });
　}
　var timer = window.setInterval(animateImages,3000);
});
</script>
</head>
<body>
<div>
<img id="rotatingimage" src="images/1.jpg" alt="">
</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2011/03/23 12:33

他の部分が不明なので、よくわかりませんが…

1）$の記述からライブラリを利用していると推測されますが、
　それらライブラリはロードされていますか？
　（ご提示部分からではわかりません）

2）ご指摘の部分は、function animateImagesの中に記述されていますが、
　animateImagesはどのようにして実行されていますか？
　　（ご提示部分だけだと実行されません）
　また、そのタイミングは？（HTMLのロード後でしょうか）

3）タイトルが「スライドショー」となっていますが、順次画像を変えるのなら
　繰り返して処理することが必要ですが、その指定は行なっていますか？
　（繰り返されるのはanimateImageなのでしょうか？）
　（ご提示内容では、繰返しだけでなく一度も実行されません）

その他、あまり大したことではありませんが…
4）animateImageを繰り返すとするなら、初期設定的な処理であるpreloadの
　呼出しや判断はその外側で一度行なっておけば充分と思われます。

5）繰り返しの間隔などを単独に決めると、fadeIn/Outの実行時間と重複して
　しまう可能性がありますが、そのあたりは回避できていますか？