builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

Ajaxの技法:クールな回転スライドの作成

文:Chris Duckett(Builder AU) 翻訳校正:原井彰弘
2008-01-11 11:30:00
  • このエントリーをはてなブックマークに追加

 これで見た目はよくなったが、各アイテムは垂直方向に順番に並んでいるだけなので、これでは正しく回転しない。そこで、それぞれのdiv要素が他の一つのdiv要素の上方に配置されるように、storydivクラスに以下のコードを追加しよう。

position:absolute;

 すると、画面は大変なことになってしまう。順序をつけるために、story2からstory4のIDを持つdiv要素を隠すことにしよう。

display:none

 これが、読み込んだ直後の回転台の表示である。さて、次はいよいよJavaScriptの記述だ。

JavaScriptを取り入れる

 回転台の特徴となるのは、コンテンツを回転させる機能だ。そのため、簡単なCSSのトリックを用いて、div要素の表示と非表示を切り替える。ここでは以下のようなコードを利用しよう。

 そして、bodyタグには以下のようにコードを挿入する。



 ここでは、ページが読み込まれたときにautorot関数が呼び出されるように指定している。autorot関数が呼び出されるとshowNext関数が呼び出され、3.5秒間隔で再びshowNext関数を呼び出すようにtimeoutが設定される。このtimeoutによって、回転台は回転し続けるのである。

 showNextメソッドでは、ただ単に表示される記事を選択し、その値をrotateDiv関数に渡す処理が行われているだけだ。実際、すべてのアクションはこのrotateDiv関数で行われている。rotateDiv関数は、storyContainerというdiv要素の子要素になっているdiv要素をすべて集め、表示したい要素以外のstyle.display変数をnoneに設定する。また、表示したい要素にはblockを指定する。

 さて、これで実用的な回転台が完成した。ただし、美しさや使いやすさの観点ではまだかなりの問題がある。そこで、それらを改善しよう。

ナビゲーション

 回転台を用いると、コンテンツの各部分を素早く表示させることが可能になる。しかしそこには、実際のコンテンツの読みやすさと、回転速度とのトレードオフが存在する。そのためナビゲーションのためのリンクが必要になる。

 ここでは、ナビゲーションのリンクとしてdiv要素を追加し、4つの記事すべてに直接ジャンプできるようにする。また、前の記事や次の記事を表示するリンクも付け加えよう。

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]