- 締切済み
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>
- hirojuille
- お礼率84% (27/32)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
勝手に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>
- fujillin
- ベストアンサー率61% (1594/2576)
他の部分が不明なので、よくわかりませんが… 1）$の記述からライブラリを利用していると推測されますが、 それらライブラリはロードされていますか？ （ご提示部分からではわかりません） 2）ご指摘の部分は、function animateImagesの中に記述されていますが、 animateImagesはどのようにして実行されていますか？ （ご提示部分だけだと実行されません） また、そのタイミングは？（HTMLのロード後でしょうか） 3）タイトルが「スライドショー」となっていますが、順次画像を変えるのなら 繰り返して処理することが必要ですが、その指定は行なっていますか？ （繰り返されるのはanimateImageなのでしょうか？） （ご提示内容では、繰返しだけでなく一度も実行されません） その他、あまり大したことではありませんが… 4）animateImageを繰り返すとするなら、初期設定的な処理であるpreloadの 呼出しや判断はその外側で一度行なっておけば充分と思われます。 5）繰り返しの間隔などを単独に決めると、fadeIn/Outの実行時間と重複して しまう可能性がありますが、そのあたりは回避できていますか？
