• ベストアンサー

数枚のバナーが一定の間隔でスクロールするライブラリ

数枚のバナー(仮に6枚)が一定時間でスクロールして入れ変わるライブラリを作りたいと思っています。 またメインバナーの横には小さいサムネールもあり、ロールオーバーでメインの画像がそれになるようにしたいです。 説明では難しいのでこちらを見て下さい。 http://www.selecsonic.com/selecsonic/top/index.jsp まさにこんな感じのものが作りたいです(全く一緒にしたい。画像は4枚verにして) html、cssの知識はありますがこういったものが全く疎いのでご教授下さい。 jqueryですよね? ポイントは 1、自動再生、一定時間でスクロール 2、サムネールをロールオーバーでメインがそのバナーまでスクロール 3、バナーをクリックでリンク先へ移動(メイン、サムネール共に) 4、ページを読む込むたびに開始位置ランダム(これはできたらでいいです) 以上です。 お願いします。

  • peco33
  • お礼率79% (123/154)

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

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

最初のご質問が 『ライブラリを作る』 だったので誤解をしてしまったようです。 どうやら、単に利用したいというだけのことのようですね。 (なので、スクリプトを覚える必要はありません) 1)まずは、利用したいものを検索などで探してみてください。  (bxSliderで良いのであれば、もちろん探す必要はありません) 2)配布元サイトに設置の説明がありますので、それを元に設置してください。  大抵HTMLソースとCSSの解説、オフションの設定方法、デモサンプルなど  がそろっていて、いろいろと説明されています。  (#1の例示もbxSliderのサイトのデモサンプルの一部です) 3)多くのものが英語サイトなので、わかりにくければ日本語の設置解説サイト  をぐぐって探すのも手です。ただし、簡単な解説だけのものが多いです。  (bxSliderを例にすれば以下:他にもたくさんあります) http://www.skuare.net/test/jbxSlider.html http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/bxslider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 4)本家のサイトでも、全部のオプションについてデモサンプルを用意している  わけではありませんので、(bxSliderのサイトの場合20サンプルありますが)  自分の行ないたい設定に合せて何がしかの調整が必要になるでしょう。 『んな、めんどーなことはやってらんねー』というのであれば、ご提示の参考サイトのソースを真似て設置すればよろしいかと。(こちらの方法であっても、uriやなんやかんやは調整が必要ですが…) いずれにしろ、ご自身のサイトのマークアップに合せた調整が必要なので、どのようなマークアップになっているかわからない者には超能力がないと調整はできないことでしょう。

peco33
質問者

お礼

ありがとうございました!! 元のサイトを参考にCSS、js等弄ったらなんとかできました><

その他の回答 (2)

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

#1です。 >質問内容はどうやって作ればいいのでしょうか?でした。 >こうしたら出来るというソースを頂けると助かります。 えっと…。 作ろうとしているのか、利用しているのか不明です。 (#1の回答は「作る」ということに対する回答です。) 全くわからないところから、作ろうというのであれば、まずはjavascriptのお勉強から始めるのが手順でしょう。 いきなり作り始めても良いですが、ライブラリを作るのはハードルが高すぎではないかと思います。 もし、利用したいだけであれば、bxSliderをご利用なさればよろしいかと思います。

peco33
質問者

お礼

度々有り難う御座います!! ちょっと時間がないものでゆっくり勉強ができません。。 何か簡単にソースがあるのであれば利用したいと思っています。 厚かましくなりまして申し訳御座いません。

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

>ライブラリを作りたいと思っています。 >以上です。 ・・・で、質問はなんなんでしょうか?(作るぞと言う宣言をしたのかな?) ご提示のサイトはbxSliderというjQueryプラグインを利用しているみたいなので、似たようなライブラリを作成したいのであれば、そのあたりがご参考になるかと思います。 1)オートチェンジと、クリック-スライドのマルチプルのサンプル  http://bxslider.com/multiple-shows.php 2)サムネイルとスライドのサンプル  http://bxslider.com/thumbnails1.php こちらも様々なオプションを用意しているみたいですが、作成なさるライブラリにどのくらいのバリエーションを持たせるかという構想によって、作成する手間が変わってくると思います。

peco33
質問者

お礼

ありがとうございます。 質問内容はどうやって作ればいいのでしょうか?でした。 サンプルを見て自作になるのですか? 調べても全くわからないものでして、、 こうしたら出来るというソースを頂けると助かります。

関連するQ&A

  • 数枚のバナーが入れ替わるライブラリーを作りたい

    6枚あるバナーが順番に表示されていき、その横にある小さい画像に触れると そのバナーに戻るみたいな、ライブラリーが作りたいのですが。 説明するのが難しいので、 http://www.selecsonic.com/selecsonic/top/index.jsp こちらの参考サイトのトップページのイメージバナーを見て下さい。 これとまったく同じものが作りたいのです。 jqueryだと思いますが、どれを使ったいいのかわかりません。 それとも自作になるのでしょうか? 宜しくお願い致します。

  • 勝手にスクロールして動いてしまう

    jqueryを使用してメインビジュアルの自動画像切り替えをしているのですが、 不具合が発生していて、しばらくすると、勝手にスクロールして動いてしまいます。 CSSとjqueryが複雑にはりこんでいるので、不具合を修正するは難しいと思い、 勝手にスクロールするのを禁止するスクリプトがあれば…、と思い投稿しました。 スクロールするのを禁止する方法が、もしあれば教えて頂けると助かります。 よろしくお願いします。

  • http://www.rapty.com/

    http://www.rapty.com/ 上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。 さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。 これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか?

  • メイン画像とサムネイル画像のスライドショー

    サムネイル付きのスライドショーのJavaScriptを探しているのですが、サムネイル画像がメイン画像の上にくるスライドショーはありますか? イメージを添付します。 http://black-flag.net/jquery/20111122-3597.html 上記のサイトとかでcssを使用してみたのですが、メイン画像の下にサムネイル画像がきてしまいます。 サムネイル画像をメインの画像の上にもっていくことはもしかしてできないのでしょうか。 よろしくお願いします。

  • jQueryスライドプラグイン

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

  • 【ランダムバナー】各バナーごとに表示時間を設定

    一定時間ごとにランダムに、 バナーとそのリンク先を切り替え表示したいのですが 例えばA・B・Cと3つのバナーを表示するのに Aは10秒 Bは5秒 Cは15秒 表示といったように、 それぞれのバナーで表示時間を変えたい場合には どうしたらよいのでしょうか? 均等な時間表示方法しか、参考ページを見つけられずに困っております。。。 すみませんが、よろしくお願いいたします!

  • 一定時間で入れ替わるバナー画像(リンク)を複数個並べたい

    現在、バナー画像と対応するリンクの 一定時間での入れ替えは出来るようになりました。 ※現在のソースを質問の最後に記述してあります。 このような動きをするバナー画像を、縦に複数個並べたいと思い、 いろいろと試してみましたが、うまくいかず大変苦戦しております。 ◆処理イメージ◆ スペース1:バナー1~バナー3を入れ替え スペース2:バナー4~バナー6を入れ替え スペース3:バナー7~バナー9を入れ替え JavaScriptにお詳しい方、実現方法をお教え頂けないでしょうか? 何卒よろしくお願いいたします。 ◆現在のソース◆ <head> <title>インターネット上にあるバナー画像を一定時間ごと入れ替える</title> <script language="JavaScript"><!-- num = 3; jumpURL = new Array(); imgURL = new Array(); jumpURL[0] = "http://aaa"; jumpURL[1] = "http://bbb"; jumpURL[2] = "http://ccc"; imgURL[0] = "http://XXX/0.gif"; imgURL[1] = "http://XXX/1.gif"; imgURL[2] = "http://XXX/2.gif"; function changeImg() { num++; num %= 3; document.banner.src = imgURL[num]; setTimeout("changeImg()",10000); } function jump() { window.open(jumpURL[num]); } // --></script> </head> <body onLoad="setTimeout('changeImg()',5000)"> <a href="javaScript:jump()"> <img src="http://XXX/0.gif" name="banner"> </a> </body>

  • ActionScript スクロールメニュー

    ActionScriptで以下のサイトのように、下段のサムネールが左右にスクロールするメニューを作成したいのですが、実現方法がわかりません。 http://www.wasedazemi.com/ ・下段の最右、または最左の矢印ボタンを押すとその方向にメニュー1個分スクロールし、下段の真ん中のメニューの画像が上段に表示される。 ・下段の任意のサムネールを押すとその画像が下段真ん中に移動し、上段にその画像が表示される。 ・下段のサムネールはループしていて、スクロールをし続けても端にならずに回り続ける。 ・上段の画像にマウスオーバーすると青い枠線が表示される。 ActionScript 3.0、Flash CS5を利用しています。 ご教授よろしくお願いいたします。

    • ベストアンサー
    • Flash
  • jQuery等で背景をフル表示+スライドショー

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

    • ベストアンサー
    • CSS
  • jQueryのプラグイン(画像処理)を探していま

    下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ================================== 1)メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 2)サムネイルはマウスオーバーで画像と文字が切り替わるようにしたい ================================== 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

専門家に質問してみよう