• ベストアンサー

(JQuery)自動でスライドさせるには・・・。

JQuery初心者ですが、サンプルをカスタマイズしてナビゲーションを自動で巡回させたいのですが 色々試してみたり調べたのですが全くもってわかりません・・・。 下記URLがサンプルで元からある機能は変えずに 操作していない時はナビゲーションと連動して一枚一枚写真が自動でスライドしている 状態にしたいのですが、お分かりになる方ご指導いただければありがたいです・・・! http://landofcoder.com/demo/jquery/lofslidernews/index5.html

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

  • ベストアンサー
  • rtgp
  • ベストアンサー率100% (4/4)
回答No.2

lofJSidernews、というメソッドのオプションに、auto:trueというのを設定してあげるだけでいいっぽいですよ 時間間隔は、interval:1000という感じで設定できるようです。(1000というのは適宜お好みの数字に変えてください。) リンク先のページに以下のメソッドがありますよね? (ソースを表示すればでてきます。) それのautoの項目がfalseになっていますが、そこをtrueに変えれば終わりです。 intervalの数字を小さくすれば時間間隔が短く、大きくすれば時間間隔が長くなります。 $('#jslidernews3').lofJSidernews( { interval:5000, easing:'easeOutBounce', direction:'opacity', duration:1200, auto:false, mainWidth:980, mainHeight:300, navigatorHeight : 100, navigatorWidth : 310, maxItemDisplay:3, buttons:buttons} );

cocoaki
質問者

お礼

ありがとうございます・・・! trueに変えるだけで出来ました!!! 何時間も悩んだのですが・・勉強不足でした・・。 助かりました!

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

何をどう試してみたのか書いてないけれど… 斜めに見ただけですが、配布元の説明に  Auto-playing (optional feature, can start playing or stopped) ってあるけれど、これって「オートプレイできるよっ」てことじゃないの? (私は英語がさっぱりなので、わかりませんが) http://landofcoder.com/jquery-plugins/lof-jslidernew-plugin.html#tab-tab-features 試してみたところ、単純にオプションで設定すればよいだけになっているみたい。 (って、↑の説明もそういう意味なのかなぁ)

cocoaki
質問者

お礼

確かに・・ そのように書いているようですね・・! 質問もどうしたら分かり易いか悩んだのですが 分かり難いのに返答ありがとうございました・・! なんとか出来ました!感謝です~

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • JQueryで画像のスライドをおこないたいのですが

    下記サイトの様に画像をスライドさせ、一定時間止めて、またスライドさせたいと思っています。 http://www.toyo-planning.co.jp/ 上記サイトはFLASHでおこなっていますが、JQueryでおこなえないでしょうか? サンプル集などを拝見したのですが、見つからず、カスタマイズして自分で作れるほどの、 知識や技術もございません。 是非ご教示頂けますと幸いです。

  • jqueryについて分からなくて困っています。

    jqueryを使って常にナビゲーションがついてくるフローティングメニューを設置しようと思っているのですが、ナビゲーションが全然動きません。 又、ナビゲーションにページ内リンクを設置しているのですがfirefoxだとリンク先に飛びません。 初歩的な事かもしれませんがjqueryを使った事がなくどうしていいのか困っています。 何が原因なのでしょうか? どうかお力をかして頂ければと思っております。 ↓下記のURLの内容になります。 http://www.roid-company.com/test/index.html

  • jQuery スライド(カルーセル)のカスタマイズ

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

  • 助けてください… jQuery 左右に動くスライド

    仕事で必要になったのですが、作成方法がわからず非常に困っております。 例サイト http://www.daiwahouse.co.jp/jutaku/merit/solar/index.html 上記URLのサイトにあるスライドショー?を作成したいと思っております。 ・自動再生はしない。 ・表示するとTOP画像、画面端をクリックで左右にスクロールする。 ・下部にコントロールボタンを設置して上部と連動する。 例サイトのような複雑な中身では作らず、上部はjpg画像をそれぞれ使用します。 ---------- お分かりになる方、または似たようなサンプルURLでも構いません! 何か、何かヒントを下さい!! jQueryの設置等は、別件で利用した事がありますので、 質問内容のような「ソース」を教えてください! jQueryのサイトを見てまわったのですが、どれも素晴らしいサンプルばかりで…… 私には改変することが出来ませんでした… 簡単でいいんです。 簡単な動きだけでいいです。 明日までに何とか形にして、提出する為、焦りまくっております! 深夜まで調べ倒して、何とかしたいのですが… もう藁にもすがる想いで質問致します。 どうか、どうか教えてください!よろしくお願い致します!!

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

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

  • jqueryスライドショーについて

    貴重な場をお借りして質問させていただきます。 jqueryでスライドショーを自作したいとおもっておりまして、 下記のようなスライドショーを実装したいとおもっております。 http://aviathemes.com/aviaslider/index.html この左上からパラパラ変わっていくアニメーションはどのような 原理で動いているか教えて頂けませんでしょうか。 調べてもよくわからず困っております。 大変申し訳ございませんがお詳しい方お力を貸して頂けませんでしょうか。 宜しくお願い致します。

  • jquery スライドショー

    http://showcase.awkwardgroup.com/index.html こちらをそのまま使用して スライドショーを作成したのですが、 メイン画像にはったリンクがきかなくて困っています。 どうしたらリンクがきくようになるでしょうか。 もしくは自動再生で次へ、前へボタンがついている簡単な物をご存知であれば 他のサンプルの紹介でもかまいません。 詳しい方、どうぞよろしくお願いします。

  • スライドショーの上にロゴマークを重ねるには

    こんにちは、友人にホームページ作成を頼まれまして、挑戦している者です。 jQueryのbxsliderを使用して、サンプルのようなスライドショーを作成したのですが、 できればこの上に、ロゴマークを重ねたいと思っています。 イメージでは、 スライドショーは自動再生で次々と画像が変わるのですが、 ロゴマークは同じ位置でずっと表示されたままというふうにしたいのですが、 どのような方法がありますでしょうか? また、できればそのロゴにリンクを貼りたいと思っています。 素人に毛の生えたような知識しかなく、あまり難しいことはできませんが^^; どなたか、ぜひアドバイスをお願いいたします。 サンプル http://www.webantena.net/demo/javascript/bxslider/index3.php

    • 締切済み
    • CSS
  • jqueryのタブ切り替えについて

    jqueryのタブ切り替えについて jquery初心者です。 某ポータルサイトを運営していて、 今回jqueryを使ってタブ切り替えを作りたいと思っています。 http://www.samuraitype2.com/demo/20090306/index.html こんな感じのものです。 ホットペッパービューティーのようにタブを押して切り替えたいのですが、(←おそらくPHP) PHPがよくわからないもので、、 そこで、質問ですが 上のURLのサンプルは少量のテキストのみでしたが、 お店の写真数枚やgoogle map、FLASH動画などの内容で切り替えを行ってく上で 動作に重たさは出るのでしょうか? ぱっ、ぱっ、と切り替わらず、少々読み込みがかかってしまうのでしょうか? 教えて下さい。 そもそもjquery自体よくわかってはいないのですが、Javascript? jqueryで色々種類があるんで、どういう意味なんでしょうか? 宜しくお願い致します。

  • jQueryのスライドショーのカスタマイズについて

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