jQueryを使用した簡易なスライドショーの作成方法

このQ&Aのポイント
  • jQueryを使用して簡単にスライドショーを作成する方法を紹介します。
  • 画像をクリックすることで次の画像に切り替わるスライドショーを作成します。
  • しかし、画像を変えるたびに画面が一番上まで戻ってしまう問題があります。
回答を見る
  • ベストアンサー

jQueryで簡易なスライドショーを作ったのですが

jQueryの練習に簡易なスライドショーを作ったのですが、画像を変えるごとに画面の一番上まで戻ってしまいます。以下にコードを載せますので、どなたかご教示いただければ幸いです。 $(function(){ var num = 0; $(".slideshow").click(function(){ $(this).fadeOut("500",function(){ var ptnum = (++num)%5 + 1; //5枚の画像をクリックで変える var ptname = "photos/pt_00" + ptnum + ".jpg"; $(this).attr("src",ptname); $(this).fadeIn("500"); }); }); }) HTMLの方は何の変哲もない <img src="photos/pt_001.jpg" class="slideshow" /> となっています。

質問者が選んだベストアンサー

  • ベストアンサー
  • tegra
  • ベストアンサー率64% (9/14)
回答No.1

たぶん画像をfadeOutしてfadeInするときに画像の高さ分 上に戻ってしまってるみたいですね。 ですので画像をdivタグで括ってあらかじめ高さを固定するのは どうでしょうか。 <div style="height:100px;"> <img src="photos/pt_001.jpg" class="slideshow" /> </div>

imakoh
質問者

お礼

ありがとうございます。その方法で無事解決しました。

関連するQ&A

  • 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>

  • 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>

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

    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>

  • jQueryの$(this)について

    閲覧ありがとうございます。 初歩的な質問で申し訳ないのですがthisのことがすこし混乱してしまい、わからなくなってしまったので下記の場合のthisはどこを読み込むか教えてもらえると助かります。 目的:aをクリックしたときimgのsrcにaのhrefに指定してあるものを埋め込む処理 $(function(){ $("a").click(function(){ $("ul li img").fadeOut(function(){ $(this).attr(src,$("a").attr("href")).fadeIn(); }); return false; });

  • jquery1.4で画像とリンクの切り替えを行おうとしています。

    jquery1.4で画像とリンクの切り替えを行おうとしています。 ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で 横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。 対処法があれば教えていただけますでしょうか? 【javascript】 $(document).ready( function() { $(".thumbnail p").click( function() { var changeSrc = this.src; var changeHref = this.href; $("#target img").fadeOut("fast", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); $("#target a").attr("href", changeHref); }); $(".thumbnail2 img").click( function() { var changeSrc = this.src; $("#target2").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); }); $(".thumbnail3 img").click( function() { var changeSrc = this.src; $("#target3").slideUp( "slow", function() { $(this).attr("src", changeSrc); $(this).slideDown(); } ); }); }); </script> 【HTML】 <div> <p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p> </div> <div class="thumbnail"> <p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item"> <img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p> <p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item"> <img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p> </div> 【css】 .thumbnail { height:200px; text-align:center; } .item { float:left; padding-left:10px; margin-left:10px; }

  • html内にスライドショーを複数設置

    こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか?当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。

  • 【jQuery】setInterval

    jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>

  • jqueryについて

    サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで 切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。 いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が 切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか? $(document).ready(function() { var originSrc = $("#target").attr("src"); $(".thumbnail a") .fadeTo(1,1) .hover( function() { var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); $(this).fadeTo(200, 0.5); }, function() { $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); } ) });

  • jqueryについて

    jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01~99(実績数)までのidを割り振る設定したいのですが可能でしょうか? 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか? 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか? $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });

    • ベストアンサー
    • AJAX
  • jQuery class要素を盛り込むには

    画像をマウスオーバーで変化させるコードを、こちらで教えていただいたアドバイスに従って以下の内容で行っています。 $(function(){ $('span img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('.jpg', 'x.jpg')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('x.jpg', '.jpg')); } }); }); BODY部分は、 <SPAN><IMG src="画像.jpg"></SPAN> となっています。 けれど、よくよく考えると、マウスオーバーしたくない画像でも<SPAN>の中に記述していたらコードの影響をうけて、存在しない(マウスオーバー後の)画像を読み込もうとしてしまいます。 基本的な質問で申し訳ないのですが、 区別するため、例えば、マウスオーバーさせたい<SPAN>にはclass要素を入れて、 <SPAN class="change"><IMG src="画像.jpg"></SPAN> としたとして、上記のコードの、 $('span img').hover(function(){ の辺りをどうにか変えればいいように思うのですがよくわかりません。 基本的すぎて申し訳ありませんが、よろしくお願いします。

専門家に質問してみよう