ヘッダー画像のフェードでの入れ替え方法について教えてください

このQ&Aのポイント
  • ヘッダー画像の下の丸い点をクリックすると画像が変わり、左右の矢印でも変えられる方法を教えてください。
  • 画像はスライドがフェードで入れ替わる仕組みであるため、画像下の丸い点などを入れずにフェードでの入れ替えをする方法を探しています。
  • 他のプラグインやアレンジの方法を知っている方がいれば、教えていただきたいです。
回答を見る
  • ベストアンサー

アレンジの仕方、教えて下さい。

先日、jQuery(JavaScript)を教えて頂きました。 ヘッダー画像の下の丸い点をクリックすると画像が変わり、また左右の矢印でも変えられる。 画像はスライドがフェードで入れ替わる、というものです。 こちらのサイトのものを使わせて頂きました。 http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html 今回は、画像下の丸い点などを入れずにフェードでの入れ替えを考えておりますが、上のサイトにはサンプルがありませんでした。 (example3を使って、下の丸を表示させないカタチにしたいです。) アレンジの仕方や、また他のプラグンがございましたら、ご存知の方、よろしくお願い致します。

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

  • ベストアンサー
回答No.1

こんにちは。 これの本体は「bxSlider」というjQueryのプラグインです。 で、マニュアルを見ればわかると思いますが・・・、 (下記参照) http://bxslider.com/options ここで、「pager」という隠れ引数がある事に注目してください。 デフォルトが「true」なので、「false」を指定すれば幸せになれるかも?

参考URL:
http://bxslider.com/options
JAZZ-NY
質問者

お礼

taka451213様 ご返事、ありがとうございます。 最初はjquery.bxslider.jsの中のpagerをfalseにしてみましたが、反応しなかったので、headに書き込むタグの部分に「pager:false,」を入れてみましたら、一発で消えました。 ありがとうございました。感謝致します!m(__)mペコ

関連するQ&A

  • Jqueryのアレンジの仕方

    http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html こちらのサイトを利用してJqueryを使ってみましたが、 http://www.dalia.co.jp/index.html 1) このように、両サイドに半透明で画像を表示されるにはどうしたらいいのでしょうか? 2) 左右の矢印は大きなブルーの矢印になっていますが、矢印の画像を変更(アレンジ)するにはどうしたらいいのでしょうか? 1)と2)のどちらでもいいので、ご存知の方よろしくお願い致します。

  • 背景色と連動するスライドショープラグイン

    お世話になります。 スライドの画像が変わるたびに背景色も変わるタイプのスライドショープラグインを探しています。 サンプルとして http://elegantthemes.com/preview/eStore/ こちらのサイトの様な感じにしたいと思っています。 中央部分がスライドショーになっており両サイドが背景となっているようです。 ソースを見てみるとslideというクラスがついた要素全体をスライドするようです。 画像だけでなく文字や背景も変わっています。 ようはインラインコンテンツそのものをスライドするタイプのものであれば良いのかなと思います。 lightboxのようなイメージギャラリーですとインラインコンテンツを表示するタイプのものがありますが、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものは無いでしょうか? もしくは簡単なjQueryで出来そうならご教授願いたいと思います。

  • jQueryで教えてください><;

    画像にマウスを置いたときに、下にテキストが表示され、なおかつ両端の矢印をクリックするとスライドするようなjQueryを教えてください><;宜しくお願いします!!

  • JQueryのスライドショーを停止させたい

    サイトの背景画像のスライドショーを「VEGAS BACKGROUND JQUERY PLUGIN」を利用して行いたいのですが、スライドショーを1回で停止(ループさせない)ようにしたいのです。 どこをいじってもうまくいかなく困っています。 お教えいただけないでしょうか? http://vegas.jaysalvat.com/ (SLIDE SHOWを利用しています。) よろしくおねがいします。

  • 配布スクリプトをアレンジしたいです、HTMLを教えてください

    いつもお世話になっております。 宜しくお願いいたします。 このスクリプトですが、参考にさせていただいています。 サムネイル(またはボタン)をクリックすると、画像が入れ替わるというスクリプトです。 http://himajin.moo.jp/freejava/imgchange/imgview3.html 上のソースでは画像の入れ替えがフェードアウト&インになっていますが、 画像の入れ替えを「瞬時にしたい」です。 上のページのHTMLのどこをいじれば良いでしょうか。 HTMLがそのまま載っていますので、上級者の方、どうか観てください。 自分流にアレンジして使用することには問題はないかと思います。 ちなみに自分でも以下の箇所の変更を試してみたのですが、 ここの数値を0に変えてみても、フェードイン&アウトは消えませんでした。         ↓ changesec=5000; //入れ替え時間(ミリ秒) “パッ”と画面が変わる感じにしたいのです。 解決策、またはヒントでも結構ですので、上級者の方、お知恵をお貸しください。 宜しくお願いいたします。

  • フラワーアレンジ

    こんにちは。 フラワーアレンジをする際の注意点や上手に作るコツを教えて下さい。 アレンジをする際、真ん中から作るのか、下から作るのかわかりません。 なんとなく、花屋さんの完成品を見て、真似して作っているのですが 正しい作り方が知りたいです。 スクール等は通ったことがありません。 また、沢山のアレンジ作品が載っているサイトも教えて頂けるとうれしいです。

  • JavaScriptでスライドページを作る

    JavaScriptでスライドページを作りたいの ですが <SCRIPT language=JavaScript> <!-- function cc(slide) { dis=Math.abs(600/slide); while(dis>0) { dis--; scrollBy(slide,0); } } //--> </SCRIPT> ↑だと横にスクロールが出来るのですが 下にスクロールさせるにはどのように すればよいのでしょうか? どなたかご教授お願いしますm(_ _)m

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

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

  • jquery cycleで画像リサイズ

    jquery cycle pluginを使用して、画像のスライドをしています。 画像を画面中央に全画面表示をしたいのですが、 スライドする画像のサイズがそれぞれ異なるため、 画像の比率を固定して、縦横のサイズで大きい方を 画面に合わせて表示したいのです。 私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、 下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という 計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。 ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、 なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。 みなさんお力お貸しください!!

  • Flashを使わず動きのあるかっこいいトップページを作成したい

    自社ホームページのトップページ作成を任されているのですが かっこいいトップページになりません。 Flashを使わずにjavascriptで以下の様なトップページ作成を試みています。 http://www.kagetu.com/ 今の所、jquery.cross-slide.jsのajax?を使って画面がスライドするページは できたのですが、スライドが止まって文字が浮かび上がってまた別の画像が スライドするといったような複雑な動きができません。 どなたかここで掲載したようなホームページをjavascriptとかを使って (Flashを使わず無料のツールで)作成する 方法をご存知の方いらっしゃいましたらご教授ください。 ※コードも載せていただけると助かります。