質問

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.1です。
ごめんなさい
 console.log($(this).attr('src'));
取り去っといてね。
(hirojuilleさんにもよろしく)

勝手にjQueryだと思い込んで↓でどうでしょう。
3秒ごとに永久に変わり続けます
(行頭の全角空白は取り除いてください)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>gomi</title>
<style type="text/css">
</style>
<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>

このQ&Aは役に立ちましたか?1 件

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

新しく質問する

注目の記事

おしトピにAndroid版アプリが登場

話題のトピックにさくっとコメントできる「おしトピ」に Android版アプリが登場! もっと身近に使いやすくなりました。
今ならダウンロードで話題の掃除ロボットや全天球カメラが 当たるプレゼントキャンペーンも実施中。


新しく質問する

このカテゴリの人気Q&Aランキング

毎日見よう!教えて!gooトゥディ