• 締切済み

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

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

みんなの回答

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

jQueryのプラグインをお探しなら、このあたりを手がかりにするのがよろしいかと・・・  http://plugins.jquery.com/ とりあえずNo1様と違うもので、それっぽいもの(WOW Slider)  http://wowslider.com/jquery-slider-crystal-basic-demo.html 違うタイプですけれど、(Easy Slide 1.0)  http://www.ezjquery.com/cgi-bin/webapp.rb?r=access# jQueryに限らなければ、ここにスライドショーのスクリプトがたくさんあります。  http://www.geocities.jp/miyake_kobo/dl/koukai.html そのなかの一つ  http://www.geocities.jp/miyake_kobo/cp_ex/cp_ex_042.html

noname#137826
noname#137826
回答No.1

jQuery.SerialScroll というプラグインがお望みのものではないでしょうか。 jQuery.SerialScroll のページ http://flesler.blogspot.com/2008/02/jqueryserialscroll.html jQuery.SerialScroll デモ http://demos.flesler.com/jquery/serialScroll/

関連するQ&A

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

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

    jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか? http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。

  • jqueryスライドのズレ修正

    jqueryのスライドショーを実装しました。 現在、添付画像のようにスライドのズレが直せません。 左端に一つ前の画像が残ってしまう状態です。。 参考にコピーさせてもらったのは下記サイトです。 http://black-flag.net/jquery/20120215-3671.html どう修正が必要でしょうか。 宜しくお願い致します。

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

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

  • 画像の自動スライドと任意スライド

    下記ページのように、自動で画像がスライドし、両サイドのアイコンでもスライドを任意で行えるようなものを作りたいのですが、作り方やコードが載っているようなサイトはないでしょうか。 http://www.rakuten.ne.jp/gold/teresa/scroll-items.html 画像にはそれぞれリンクが必須です。上記ページのように画像にマウスを合わせると上のテキストも切り替わるというような+アルファ要素は別になくても構いません。(あれば尚よし) 自分はhtml と cssの知識はありますが、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/) スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、 ぜひ教えていただきたいと思っております。 ご教授のほど、何卒よろしくお願いいたします。

  • JQueryを使用して画像をゆっくり表示させる

    JQueryを使用して画像をゆっくり表示させる ご覧いただきましてありがとうございます。 今回新規でHPを作るにあたり、トップの画像をゆっくりと表示させようと思っています。 そういった画像はFlashで良く見るのですが、Flashを使わずJQueryで作成しようと思っています。 ただ、逆引きのサイトなどを見てもボランクリックで表示やスライドショーの表示方法は載っているのですが 私の理想としている風のはなかなか見つけられません。 詳しい方、ご教授いただけると幸いです。 http://www.wasedasai.net/about このような風に表示するのが理想です。 ソースを見るとこのサイトもJQueryを使用しているみたいなのですが・・・

  • メインイメージのスライド

    最近の流行なのか、下記の様なメインイメージの処理をよく見ますが、 これはFLASHだけで実現できるのでしょうか?それともjqueryを使用している? 単純なスライドならjqueryで出来そうですが、表示されていない両脇の画像を 小さくしたり、薄くしたりは難しそうだし・・・。 どなたか知識ある方、教えて頂けませんでしょうか? http://www.yokohama-landmark.jp/page/ http://www.nttdocomo.co.jp/ http://www.zibunzikan.com/

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

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

専門家に質問してみよう