- ベストアンサー
jqueryスライドショーについて
my--の回答
<!DOCTYPE html> <html> <head> <title></title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> jQuery(function ($) { var wrapper = $('#wrapper'); var x = 0, y = 0; // div要素の生成と配置挿入（ヨコ8 * タテ4 = 32個） while (y < 320) { // img 高さ $('<div class="tile" />').css({ position: 'absolute', display: 'none', left: x + 'px', top: y + 'px', height: 80 + 'px', width: 80 + 'px', backgroundPosition: '-' + x + 'px -' + y + 'px' }).appendTo(wrapper); // 挿入 // 座標数値更新 x += 80; if (x >= 640) { // img 幅 x = 0; y += 80; } } // 差替え function func() { var prop = { css: { backgroundImage: 'url("差替え画像の場所")', // 640 x 320（同サイズ） display: 'block', width: 0, height: 0, opacity: 0 }, animate: { width: 80, height: 80, opacity: 1 } }; $('div.tile').each(function (i) { var tile = $(this); setTimeout(function () { tile.css(prop.css); tile.animate(prop.animate, 600); // アニメーション }, i * 60); // 時間差呼出し }); } setTimeout(func, 3000); // 3秒待つ }); </script> </head> <div id="wrapper" style="position: relative;"> <img src="..." style="width: 640px; height: 320px;" alt=""> </div> </body> </html> 質問にあるリンク先から、知りたいところをピンポイントで切り出したサンプルです。 開発ツールでDOM構造（スタイル）の変化を確認するようにすれば、いろいろ見えてくると思います。
関連するQ&A
- jqueryスライドのズレ修正
jqueryのスライドショーを実装しました。 現在、添付画像のようにスライドのズレが直せません。 左端に一つ前の画像が残ってしまう状態です。。 参考にコピーさせてもらったのは下記サイトです。 http://black-flag.net/jquery/20120215-3671.html どう修正が必要でしょうか。 宜しくお願い致します。
- 締切済み
- JavaScript
- JQueryのスライドショーを停止させたい
サイトの背景画像のスライドショーを「VEGAS BACKGROUND JQUERY PLUGIN」を利用して行いたいのですが、スライドショーを1回で停止（ループさせない）ようにしたいのです。 どこをいじってもうまくいかなく困っています。 お教えいただけないでしょうか？ http://vegas.jaysalvat.com/ （SLIDE SHOWを利用しています。） よろしくおねがいします。
- ベストアンサー
- JavaScript
- jQueryでスライドショーを作っているのですが
jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、 （http://maxb.net/scripts/jbgallery-2.0/docs/nomenu.html） JavaScrip初心者の為、スライドショーを最後の画像でストップするやり方が分からず 困っております。 スライドショーにはjbgallery-2.0.jsといファイルを使用しております。 （ファイルを製作された方のサイトはこちら：http://maxb.net/scripts/jbgallery-2.0/） スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、 ぜひ教えていただきたいと思っております。 ご教授のほど、何卒よろしくお願いいたします。
- 締切済み
- JavaScript
- jQueryのスライドショーのカスタマイズについて
仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。
- 締切済み
- JavaScript
- jQueryのプラグイン「Skitter」について
下記サイトで配布されているjQueryのプラグイン「Skitter」について、 質問させて下さい。 http://thiagosf.net/projects/jquery/skitter/ スライドショー用にjQueryの良いプラグインはないかと探して見つけたのが、 このSkitterで、実装も簡単だしアニメーションのエフェクトも多彩で、お気に入りです。 質問は、スライドショーが無限にループしてしまうのを、 最後の画像がきたところで、ストップさせる、 というカスタマイズが出来ないかという事です。 ファイルの中身を見たり、検索エンジンも使ってみましたが、 答えが見つけられず、思い切って質問してみました。 わかる方いらっしゃいましたら、ぜひお教え願いたいと思ってます。 よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- jquery スライドショー
http://showcase.awkwardgroup.com/index.html こちらをそのまま使用して スライドショーを作成したのですが、 メイン画像にはったリンクがきかなくて困っています。 どうしたらリンクがきくようになるでしょうか。 もしくは自動再生で次へ、前へボタンがついている簡単な物をご存知であれば 他のサンプルの紹介でもかまいません。 詳しい方、どうぞよろしくお願いします。
- 締切済み
- JavaScript
- jQueryでスライドショー作成(無限ループ)
jQueryでスライドショーを作成したいです。 仕様としては、進むボタンと戻るボタンがあって、どちらかを押すと、画像が前または後ろにスライドして変わります。 ここまではできるんですが、以下のような無限にループさせることができません。 ・最後まで行ったときに、進むボタンを押すと、最初の画像が右から現れてスライドし、最初に戻る。 ・最初の画像のときに戻るボタンを押すと、最後の画像が左から現れてスライドし、現在地が最後の画像になる。 具体的には、下記サイトのような挙動にしたいです。 http://www.slidesjs.com/ このようなスライドショーの無限ループは、どのように考えれば実現できるのか、どなたかご教授いただけないでしょうか？
- ベストアンサー
- JavaScript
- JQuery スライドショー 画像切替時について
Jqueryを使ってスライドショーの ホームページを作成しています。 下記のサイトからダウンロードしました。 http://www.woothemes.com/flexslider/ 質問なのですが、画像に囲まれている箇所で 白丸、選択された時に青丸が表示されるのですが、 そこの色を変更したいのですが変更可能でしょうかぁ。 変更するのであれば、どこのソースを変更すれば可能でしょうかぁ？ 大変、勉強不足で申し訳ございません。 また、丸表示から四角表示は可能でしょうかぁ。
- 締切済み
- その他（プログラミング・開発）
- スライドショーで、左側に一覧を出す
PowerPointのスライドショーを写しながら、 解説をする自作動画を、撮ろうと思っています。 その際、スライドショーを使うのですが、 作成したスライドが多く、解説している時に分からなくなったりします。 まだ出す所でない文字を出してしまったり、 次のスライドが何だったか、分からなくなったり。 PowerPointのスライドショーで、左側に一覧を出す。 このような事って、できるでしょうか？ スライドショーにせずに、PowerPointの編集画面だけ、 これを写して解説もできますが、アニメーションが使えません。 アニメーションが使えて、左側にスライドショーの一覧。 このように設定できたら、と思っています。 上記のような機能は、PowerPointにあるでしょうか？ また、何か対策みたいなことはあるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- PowerPoint（パワーポイント）
- jQueryスライドショーについて
jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/alicex/45Jv 実際に配置して、ブラウザチェックを行ったのですが、 (1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて 戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走 して、勝手に動いてしまいます。 (2)また、サムネイル上でカーソルを高速で通過させると、 させた分だけ記憶してメインイメージが変化してしまいます。 (1)のバグを無くしたいのと、(2)は、今カーソルを合わせている サムネイルに対応したメインイメージにすぐ変化して欲しいです。 jsに原因があると思うのですが、どの部分を修正すればよいでしょうか。 $(function() { var thumb = $("#thumbnail"); var main = $("#main"); $("li:first-child",thumb).addClass("on").children("img").hide(); $("li:not(:first-child)",main).hide(); slider(); $("li",thumb).hover(function() { $("li",thumb).removeClass("on").children("img").show(); $(this).addClass("on").children("img").hide(); num = $(this).index() + 1; mainSelector = $("li:nth-child(" + num + ")",main); mainSelector.fadeIn(); $("li",main).not(mainSelector).fadeOut(); }); }); function slider() { $("#thumbnail li img").show(); $("#thumbnail li.on img").hide(); c = $("#thumbnail li.on").index() + 1; c2 = $("#thumbnail li.on").index() + 2; mainSelector = $("#main li:nth-child(" + c + ")"); $(mainSelector).fadeIn(); $("#main li").not($(mainSelector)).fadeOut(); $("#thumbnail li").removeClass("on"); if (c2 == 6) { $("#thumbnail li:nth-child(1)").addClass("on"); }else{ $("#thumbnail li:nth-child(" + c2 + ")").addClass("on"); } timerID = setTimeout('slider()',3000); } 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
涙がでるほど嬉しいです。本当にありがとうございました！！