jQueryスライドショーの設定

前へ 次へ
このQ&Aのポイント
  • jQueryスライドショーの設定方法とは？
  • Slides, A Slideshow Plugin for jQueryの使い方
  • スライドショーの矢印を制御する方法
回答を見る
  • ベストアンサー

jQueryスライドショーの設定

http://slidesjs.com/ Slides, A Slideshow Plugin for jQuery ここのjqueryを使って、左右の矢印(←　→)をクリックすると div要素が順番に入れ替わっていくというものを導入しました。 そこで、例えばdivが３つあったとして、 １が表示されているときに→を押すと、当然２に行きますが ３が表示されているときに→を押すと、スクロール自体は右にスクロールしているのに １が表示されてループしてしまいます。 そこで、３が表示されているときは、→をクリックしても1に行かない、 そもそも→はクリックできず、←しかクリックできない状態にしたいのです。 矢印は消えなくていいです。 うまくストップさせることはできないでしょうか

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 矢印を消すタイプであれば比較的簡単に実装できました。 下記ディレクトリにslides.jquery.jsがありますので参考にしてみてください。 動作設定にautoRepeatを追加しました。 これをfalseで指定すると今回の改造した動作になります。 完全なテストはしていないのでバグがあったら申し訳ございません。 こんな感じで指定します。 $(function(){ $('#slides').slides({ preload: true, preloadImage: 'img/loading.gif', play: 1000, pause: 2500, hoverPause: true, // 指定しないとtrueで指定したのと同じ autoRepeat: false }); }); ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7376425/

hap_miu
質問者

お礼

ありがとう御座います！ 無事に動作しました。 jQueryの本も見ながらいろいろとやっては見たのですが 進展せずでしたが、今回ばっちり実現できました。 サンプルで頂いたものを、再度拝見し、勉強させていただきます。 本当にありがとう御座いました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQuery、カルーセルの改造について

    どなたか教えていただけませんでしょうか。 jQueryのカルーセルを設置したのですが （こちらのカルーセルです→http://jqueryfordesigners.com/jquery-infinite-carousel/） 左右の矢印にマウスを置いただけでスクロールしてくれるような改造は難しいでしょうか？ マウスを置くとスクロールが開始されて、離すと止まる。 クリックすると手動に切り替わる　……ような雰囲気が理想です。 宜しくお願いします！

  • jQuery等で背景をフル表示＋スライドショー

    http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は３枚で、３枚目の画像だけ、縦長になっているので、 背景が３枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 ３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？ jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。

    • ベストアンサー
    • CSS
  • jQueryのスライドショーのカスタマイズについて

    仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。

  • jQuery スライド表示について（カルーセル）

    「画像＋テキスト」をスライドして表示しようとしています。 スライドする要素が1つのときでも表示できるようにしたい（このときはスライド動作は不要）のですが、配布されているものいろいろ試すと、要素が1つの時には画像自体が表示されないものばかりでした。 下記のスライダーような見え方をするものを探しているのですが、 javascriptがわからず、一つのときでも表示できるようにカスタマイズをすることができません。 何かよい方法はないでしょうか。 http://www.bxslider.com/multiple-slides1.php http://www.gmarwaha.com/jquery/jcarousellite/index.php 本来なら要素ひとつのときにスライドさせる仕組みを使う必要はないのですが、 スライド部分にいくつ要素が入ってくるかわからない、また変動するため、 どのような場合でも対応できるようにしたいのです。 どうぞよろしくお願いします。

  • jqureryスライドショーが上手くいきません。

    こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン　フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }

  • jquery(js)にて実装したいスライドショー

    jquery(js)にて実装したいスライドショー機能があります。 参考サイト http://j-sen.jp/kanto/city_411_1.htm サムネイル画像下の "他の写真を見る"の左右の矢印をクリックでサムネイルが 切り替わる機能です。 写真のＵＲＬはシステムにより吐き出すため, 枚数は決め打ちではないので、配列に画像URLを入れていくとは思うのですが、 うまくソースがかけません。 地頭のある方、何卒力添え宜しくお願いいたします。

  • jQueryのclickについて

    現在仕事でjQueryを使用して、要素の表示非表示を行うイベントを作成しているのですが、一つ難題がありまして・・・まず下記に簡単に文法を記述しましたのでご覧下さいませ・・・ 『html』 <ul> <li>ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> </ul> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> 『jQuery』 j$("li").click(function(){ var btnNum = j$("li").index(this); j$(".area").hide(""); j$(".area").eq(btnNum).show(""); }); 上記にしたときに例えば”ボタン1”を押した時に再度”ボタン1”をおすとここでいう一番目の”area”を消去したいのですが、 toggleを使用すると”ボタン1”を押した時に”ボタン2”を押すと再び”ボタン1”を押すと、消去してからの動作をするため二度クリックしないと”area”が表示されません… そこでtoggleの様な動作で、同じボタンを二度押すと対象の要素が消去されるようないい方法ありませんでしょうか？ 折角jQueryを使用しているのでスリムな記述がしたいんですよね・・・ 宜しくお願いします。

  • 【jquery】自動再生するスライドショー

    jquery プラグインで、 　○自動再生するスライドショーで、 　○画像に対して、hover イベントで再生を一時停止できる 　○左右の方向ボタン（「<」「 >」 ）で再生方向をコントロールできる ものを探してます。 自動再生の動きは、 http://logicbox.net/jquery/simplyscroll/ がベストなんですが、このプラグインは、自動再生モードでは、 方向をコントロールするボタンを表示できないのです。 上記の条件に合致するものを、誰かご存知ないでしょうか？ あるいは、上記のプラグインで、自動再生しながら、左右の方向ボタンを表示し、 ボタンをクリック、もしくは hover することで、方向を反転させられるように するにはどうすればいいでしょうか。 詳しい方、よろしくお願いいたします。

  • jQuery スライド（カルーセル）のカスタマイズ

    jQuery スライド（カルーセル）のカスタマイズで困っています。 http://slidesjs.com/ こちらのサイトのJqueryライブラリを使って、 常時3つ表示のスライドギャラリー（カルーセル）を作成したいと思っています。 サンプルの中に3つ表示のタイプが含まれているのですが、（/Slides/examples/Carousel/) スライドも3つ同時に動きます。この部分を1つずつ動かしたいと思いカスタマイズしていますが、 うまくいきません。 要件としては、下記です。 ・同時に3つ表示させたい ・スライドは１つずつ動かしたい ・きれいにループさせたい（最後と最初のアイテムをスムースに接続） ・「Prev」「Next」「pagination」はそのまま活かしたい ・「pagination」のボタンは現状、1つに対して3つのアイテムがスライドするが、１つに対して1つにしたい。 別のライブラリをベースにしたほうがよいでしょうか。 何分素人なので、どなたかご教授くださいませ。よろしくお願いします。

  • jQueryのmouseenterについて

    jQueryで、#div1　にmouseenter,mouseleaveを設定していますが、#div1の領域の一部に重なって表示している別の要素（#div1の子要素ではない）があり、その上にマウスが乗るとmouseleaveが発動します。 これを、発動しないようにする方法はあるでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する