![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
こんにちは。
トップページを開くと、画像5枚程度のスライドショーのみが画面に表示され
それが終わると通常のトップページの全内容が表示される様にしたいのですが
それをjavascriptで実現させる事は可能でしょうか。。。
ファイルはindex.htmlのみでindex.htmlからtop.htmlへ移動させるような方法ではなく
index.html内でオープニングムービーとコンテンツとして表現したいのです。
説明がへたくそで申し訳ないのですが
1.サイトにアクセスする
2.画像5枚程度のスライドショーのみが画面上で始まる
3.ニュースやリード文、バナー等が設置された通常のページが表示される
(4.可能であれば、2回目以降の訪問者にはムービーを表示させたくありません。。)
という流れを、一つのhtmlファイルで移動させる事なく実現させたいのです。。。
ご教授お願いできますでしょうか!!!
よろしくお願いします!!!
No.2ベストアンサー
- 回答日時:
こんにちは。
以下のようなイメージでしょうか。
http://hppg.moe.hm/okwave/qa/q7732311
(パーっと作ったので細かい表示のズレとかあるかもしれません)
スライドショーは好きなプラグインを利用して下さい。
(ただし、スライドショー終了後に任意のJavaScript関数を実行できるもの)
今回はRhinofaderを利用しています。
設置参考サイト
http://coliss.com/articles/build-websites/operat …
公式サイト
http://rhinoslider.com/
またcookieを簡単に扱うためにjquery.cookie.jsを利用しています。
(4.の1度訪問した人にはスライドショーを表示しないようにする為)
動作原理は、
#main,#topimageはスタイルシートで非表示
クッキーを参照し、訪問者である場合は#mainをshow()で表示することにより通常のコンテンツを表示する。
初めての訪問の場合は#topimageをshow()で表示し、スライドショーを実行する。
全てのスライドショーを実行後にスライドショーの画像をfadeOutし、非表示とする。
fadeOutの実行終了後に#mainをfadeIn()することで通常のコンテンツを表示する。
このような動きになっています。
LancerVII様
こんにちは。
早速のご回答、ありがとうございます!!!
まさにこのような動きをイメージしておりました!!!
先ほどから、ソースをダウンロード拝見させていただいているのですが
調べながら一つ一つ理解して覚えていきます!!!
自分にはなかなか時間がかかりそうですが。。。
まずは、御礼申し上げます!!
今後ともどうぞよろしくお願いします!!
No.1
- 回答日時:
JavaScriptでJQuery.jsのライブラリを取り込んで、その中の画像表示効果の関数を活用します。
実は私も試したことがないので丸投げで恐縮ですが、WebDesignFactryサイトの記事が参考なると思います。
http://webdesignfactory.schoolbus.jp/jquery_slide/
また、2回目以降の訪問者のオープニング停止は、クッキーを活用して動作を停止することで実現できますから、これも調べてみましょう。
seastar3様
こんにちは。
早速のご丁寧な回答をありがとうございます!!!
ヒントをいただいているにも関わらず、理解できず。。。
勉強します。。。。
今後ともどうぞよろしくお願いします!!!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- 防犯カメラ・監視カメラ・小型カメラ VHSを高画質な動画ファイルにしたいです。 3 2022/05/06 12:08
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- その他(IT・Webサービス) WEBサイト内のファイルを探す方法は? 1 2022/11/11 16:38
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
追加ボタンを押した際に ok ボ...
-
Q&A掲示板の入力フォームに文字...
-
スマホ上で、左右スワイプで次...
-
フロントエンドフレームワーク...
-
セレクトボックスで配列を呼び...
-
jQueryでのレスポンシブが綺麗...
-
メールフォームの日付入力フォ...
-
変数名をどのようにつけるのが...
-
出発駅A、到着駅Bを選択すると...
-
IndexedDB を使ってファイルア...
-
読み込んだQRコードをフォーム...
-
最小二乗法
-
二次元配列の中の各行の要素を...
-
「?」の意味
-
HTMLでサブフレームから親のス...
-
二次元配列の全要素の全要素を...
-
jsで質問です。 ボタンが二つ存...
-
階層別の組織図の自動作成について
-
正規表現について質問です。条...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デスクトップにある画像のパス...
-
VBのPictureBoxで画像をドラッ...
-
HTMLの画像自動更新について
-
.htaccess アクセス制限がエラ...
-
画像の上にあるプルダウンボタ...
-
ApacheのBasic認証のログの取り方
-
JANコードを検索出来るサイト
-
google.co.jpはホスト名ですか?
-
ikeyとは何ですか?
-
外部の別ホストからのPOST送信...
-
ブロードキャストストームの確...
-
グーグルで検索順位が上がると...
-
VBAのコード隠蔽について
-
Google アラートみたいなサイト...
-
ブログやホームページを毎日更...
-
HTTPのBasic認証に自動ログイン...
-
MRTGのグラフ表示について
-
掲示板集を探しています。
-
Basic認証のパスワードをユーザ...
-
在宅チャットレディーについて
おすすめ情報