- 締切済み
Javascript スライドショー
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>
- hir31hiro
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
No.1です。 ごめんなさい console.log($(this).attr('src')); 取り去っといてね。 （hirojuilleさんにもよろしく）
- yyr446
- ベストアンサー率65% (870/1330)
勝手に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>
