人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Web site でのスライドショーの作り方について質問です。
・制作についての簡単な解説
・具体的な制作方法が書いてあるサイト、blog等
を教えて下さい。以下のページに表示されているようなスライドショーをページ内に設置したいのですが、JapvaScriptやCSSで出来るのでしょうか?
http://www.gq.com/?us_site=y
特集記事のイメージがスライドショーで順番に表示されており、かつ赤丸部分をクリックすることで次へ、前へのコントロールが出来ます。イメージクリックで当該ページにリンクしています。またこれはiPhoneでも表示できるでしょうか?

●質問者: zenhippie
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● パパトモ
●100ポイント

はいできます。

次のページにまとめられているので参考になると思います。

http://phpspot.org/blog/archives/2007/04/web_22.html


パパトモさんのコメント
上のリンクで紹介されているページでは、サンプルもダウンロードできるので応用が利くと思います。 http://sonspring.com/journal/slideshow-alternative

パパトモさんのコメント
直前のリンクのSlideshow Alternativeは、iPhoneでも動作可能なはずです。

パパトモさんのコメント
質問の動作と全く同じではありませんが、少ない改造で質問の動作をさせることは可能だと思います。

楽1978さんのコメント
すいません。自分で確かめればよかったですが、Slideshow AlternativeはPCで動作するiPhoneシュミレーターでちゃんと動作してます。

zenhippieさんのコメント
回答ありがとうございます。サンプルが多すぎてどれが近いものなのか判別が付きにくいですね。。ただ参考にはなります、ありがとうございます。

2 ● Cherenkov
●200ポイント ベストアンサー

質問にあるサイトは JavaScript - i’Slider - infinity loop slider! | CodeCanyon このプラグインを使っているようです。
jquery carousel でググれば出来合いのものがいくつも見つかります。こだわって探しだすと要望を満たすものは意外と見つかりません。改造は用意されたオプションの範囲にとどめておくべきです。
縦方向は検索キーワードに vertical を付け足す。


楽1978さんのコメント
回答補足:この回答のサンプルもiPhoneシュミレーターでちゃんと動作します。また、質問のリンクもiPhoneシュミレーターで動きます。

zenhippieさんのコメント
回答ありがとうございます。このプラグインなんですね。大変参考になりました。

3 ● 楽1978
●0ポイント

たぶん下記サイトはjqueryを使ってなく、http://www.gq.com/?us_site=yに一番近いと思います。

http://www.geocities.jp/miyake_kobo/cp_ey/hukugou_sl_010.html

ちなみに上記のサイトはiPhoneシュミレーター(PCでiPhoneの動作確認するソフト)で動作確認済みです。


zenhippieさんのコメント
回答ありがとうございます。わたしの環境(Mac,chrome)だとスライドしないようです。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ