![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
こんにちは。
サイトのトップページで4,5枚の画像をスライドショーで表示させ、
スライドショーをフェードアウトで終了後に通常のトップ画面がフェードインして表示させることを、
FlashかjQueryで動作させるにはどうしたらいいのでしょうか?
トップページは遷移してページを表示させるのではなく同ページ内で実行させたいです。
参考にしたいwebサイトとしてこちらのhttp://www.boku-seka.com/
映画公式サイト「僕たちは世界を変えることが出来ない。」のように
出来ればなと考えています。
どうか詳しくご存知の方教えていただけないでしょうか。
よろしくお願いします。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
拙作『だぶサラダ』
http://dabsalad.wi-wi.jp/ で作ってみました。http://pv.wi-wi.jp/okwave/q8292909/
スクリプトはHTMLコードをご覧ください。
"skip"のような仕組みは現段階では実装されていません。(今後実装するかどうかは現段階では未定です。)
そのため、skipされたように見せていますが、実際にはバックグラウンドでスライドショーが続けられています。(CSSのz-index指定により隠れているだけです。)
----------
スライドショーに必要なスクリプトは、
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="jquery.dabsalad.cw.js"></script>
この2行と、
その下のHTMLファイルに直に記述している<script>です。
-------------
$("#eyecatch").dabSalad(
{//グローバルオプション
loop:false,
onend: function(){ $('#menu').delay(2000).fadeIn(); } // スライドショー終了
},
[//使用画像
"images/photo1.jpg",
"images/white.png", "images/text1.png",
"images/white.png", "images/photo2.jpg",
"images/white.png", "images/text2.png",
"images/white.png", "images/photo3.jpg"
],
// 以降、動作定義(タイムライン、脚本)
{dressing:'image', duration: 1000, from:{width:'640px', height:'480px'}, to: {width:'640px', height:'480px'}}, // photo1
{dressing:'image', interval: 3000, group: true},//white
{dressing:'image', interval: 4000}, //text1
{dressing:'image', interval: 3000, group: true}, // white
{dressing:'image', interval: 4000}, // photo2
{dressing:'image', interval: 3000, group: true},//white
{dressing:'image', interval: 4000}, // text2
{dressing:'image', interval: 3000, group: true},//white
{dressing:'image', interval: 4000} // photo3
);
------------
第二引数で使用する画像を読み込み、
第三引数以降が、それぞれの動作を順番に定義しています(いわゆるタイムライン。個人的に"脚本(スクリプト)"と呼んでいます)。
だぶサラダにはフェードアウトする仕組みがありませんので、真っ白の画像(white.png)をフェードインさせる事で前の画像がフェードアウトしているように見せかけています。
すみませんがドキュメントが全くできておりません。(早くてもあと数日から1週間かかると思います。)
サポートは個別に行いますので、サイトトップから問い合わせページにいき、メールを送信してください。
No.3
- 回答日時:
flashで作ればよいです。
ただし、
「Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)・・・【中略】・・・Flash などの特殊な機能が使用されているために・・・【中略】・・・検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/357 … )」
という致命的欠点。
ユーザーに最も嫌われる手法・・・少なくともスキップできる機能をつける。
flashは、将来的にはwebでは使われなくなる可能性が高い
などの欠点を覚悟の上で・・
ご指摘ありがとうございます。
一度Flashで作ってみようと思います。
確かにflashは今後使われなくなりそうですね・・・
でも、プログラミング力がまだまだ足りない私には
今のところflashを使ったほうがよさそうです(゜´ω`゜)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- SEO 複数のサイト(別々のサーバー)を1代のPCで管理する方法 4 2022/11/27 09:40
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- WordPress(ワードプレス) WordPressのダッシュボードに入れなくなりました。 サイトのURLの最後にwp-login.p 1 2022/11/04 18:38
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlかcssで背景の白い枠をなく...
-
CSSでの動画のマスク処理
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
background-sizeの背景で最小値...
-
背景固定画像にイメージマップ
-
ポップメニューの作り方教えて...
-
要素の幅をいろんな写真の幅に...
-
【ウェブ構築】DIVの背景を斜め...
-
画像貼り付け、URLに飛べる軽い...
-
PDFの保存ボタンが表示されません
-
ヤフーオークションの説明文に...
-
ロゴマークだけを抜き取って貼...
-
PowerDirectorでバックで曲が流...
-
画像の加工:方眼紙のような画...
-
背景が透明なリンクボタンで、...
-
アイコンの背景を透過させたい
-
フォトショップで台形の斜め線...
-
FireAlpacaの透過、PNG保存の状...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
iframe内をクリックさせない方...
-
【Webサイト】画像が小さく表示...
-
同じ画像 複数回使用
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
background-sizeでcontainする...
-
lightbox2で画像を天地左右中央...
-
コーディング中、右側に謎の余...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
背景画像をリピートさせない方...
-
CSSで背景画像をランダムに表示...
-
フッターの背景に色を指定した...
-
ページの上下に白い横線が入る
おすすめ情報