オープニングページを設置したい

こんにちは。
トップページを開くと、画像5枚程度のスライドショーのみが画面に表示され
それが終わると通常のトップページの全内容が表示される様にしたいのですが
それをjavascriptで実現させる事は可能でしょうか。。。

ファイルはindex.htmlのみでindex.htmlからtop.htmlへ移動させるような方法ではなく
index.html内でオープニングムービーとコンテンツとして表現したいのです。

説明がへたくそで申し訳ないのですが
1.サイトにアクセスする
2.画像5枚程度のスライドショーのみが画面上で始まる
3.ニュースやリード文、バナー等が設置された通常のページが表示される
（4.可能であれば、2回目以降の訪問者にはムービーを表示させたくありません。。）

という流れを、一つのhtmlファイルで移動させる事なく実現させたいのです。。。

ご教授お願いできますでしょうか！！！

よろしくお願いします！！！

No.2 ベストアンサー 回答者： LancerVII 回答日時： 2012/10/05 08:48

こんにちは。

以下のようなイメージでしょうか。
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様

こんにちは。
早速のご回答、ありがとうございます！！！
まさにこのような動きをイメージしておりました！！！

先ほどから、ソースをダウンロード拝見させていただいているのですが
調べながら一つ一つ理解して覚えていきます！！！

自分にはなかなか時間がかかりそうですが。。。

まずは、御礼申し上げます！！

今後ともどうぞよろしくお願いします！！

お礼日時：2012/10/05 13:49

No.1 回答者： seastar3 回答日時： 2012/10/05 01:42

JavaScriptでJQuery.jsのライブラリを取り込んで、その中の画像表示効果の関数を活用します。

実は私も試したことがないので丸投げで恐縮ですが、WebDesignFactryサイトの記事が参考なると思います。
http://webdesignfactory.schoolbus.jp/jquery_slide/
また、２回目以降の訪問者のオープニング停止は、クッキーを活用して動作を停止することで実現できますから、これも調べてみましょう。

この回答へのお礼

seastar3様

こんにちは。
早速のご丁寧な回答をありがとうございます！！！

ヒントをいただいているにも関わらず、理解できず。。。
勉強します。。。。

今後ともどうぞよろしくお願いします！！！！

お礼日時：2012/10/05 14:14