ASCII.jpツイートするカルーセルの動きに合わせてコンテンツ表示を切り替える前のページの作業で縦型カルーセルの実装が終わったので、今度はカルーセルの動きに合わせてコンテンツ部分を切り替える機能を追加します。jCarouselライブラリにはそうした機能はありませんので、ちょっと工夫して自前で作ってしてみましょう。この変数の値を↑ボタンがクリックされたら1つ減らし、対応するページ番号のコンテンツを表示します。同時に、以下のスクリプトで表示中以外のページ番号のコンテンツを非表示にします。該当するページを表示するjQueryではメソッドチェーン(関連記事)により、これらの処理を1行にまとめられます。実際には以下のように書きます。$(".reviewPage").hide().eq(pageNo).show();場合によっては↑ボタンがクリックされ続けることもあります。}↓ボタンの場合も同様の処理を書きます。ページ数を求め、最大ページ数を超えないようにします。}これでできあがりといきたいところですが、このままではページが読み込まれた直後に左側に何も表示されません。して最初の書評だけ表示されるようにします。});自前で追加したスクリプトは、前回作成した「booknavi.js」に書き足して保存します。HTMLのヘッダーに、「jquery-1.2.3.js」「jquery.jcarousel.pack.js」「booknavi.js」の3つを読み込むように<script>タグを設定したら完成です。src="js/booknavi.js"></script>■完成した作例サイト完成した作例。右側のカルーセルを操作すると、左側のメインコンテンツ(書評)の表示も切り替わりますカルーセルを横型にしたり、表示する件数を増やしたり、カスタマイズも簡単にできます。作例をもとにいろいろと試してみるといいでしょう。一覧へDESIGN普通のtableタグを1行で動く表にするJSライブラリ「Yahoo!不動産」が採用する“ソートできるテーブル”を組み込んでみよう。ライブラリを使えば僅かな作業で実現できる。DESIGNGoogleマップ+jQueryで作るAjaxなデザインGoogleマップと自作のスクリプトで、地図と連動するショップガイドのWebサイトを作ろう。Lampの使い方を紹介する。DESIGNjQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。運営するWebサイトに複数のショッピングサイトのアフィリエイトリンクを張りたい――そんなときはJavaScriptでちょっとした工夫をしてみよう。DESIGN意外性が心地よいJSメニューのWebデザイン米国のインタラクション・デザイナーのサイトで使われているナビゲーション。意外な動きが気持ちいいこのメニューをjQueryで再現してみよう。あのサイトの“技”を盗め「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。00DESIGNjQueryで作るAmazon流リキッドレイアウトAmazonのようにウィンドウの幅に合わせてコンテンツの表示を変えるようにしたい――難しいリキッド・レイアウトで使えるテクニックにチャンレジしてみよう。00DESIGNあのFlashサイトのUIをjQueryで作る海外サイトをお手本に、ページの切り換えをJavaScriptで派手に演出する方法を紹介しよう。スライドする動きもjQeryを使えば手軽に作れる。00DESIGNFlashではなくjQueryで!インパクトのあるUIを作ろう国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく方法を紹介する本連載。第6回はFlashを使わずにインパクトのある表現を実現する方法について。00DESIGN長~いページもスッキリ!jQueryでタブ表示1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまう。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法だ。UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介する。00DESIGNjQueryで作る“Amazon風”インターフェイス国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第4回はAmazon.co.jpの回転式スライドパネル(カルーセル)に挑戦しよう。この冬作ろう!jQueryプラグイン講座2008年、最も勢いのあったJavaScript/Ajaxライブラリ「jQuery」。1日1本、簡単なプラグインの作成方法を解説する6日間の集中講座だ。国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第10回はサムネイル画像の魅力的な見せ方について。00DESIGNGoogleマップ+jQueryで作るAjaxなデザインGoogleマップと自作のスクリプトで、地図と連動するショップガイドのWebサイトを作ろう。00DESIGNjQueryとは――Webデザイナーから見た魅力Webデザイナー、マークアップエンジニアのためのjQuery入門がスタート。仕事の幅が広がるjQueryを最短距離でマスターしよう。00DESIGNjQueryのダウンロードとインストールのチュートリアルWebデザイナー、マークアップエンジニアのためのjQuery入門がスタート。仕事の幅が広がるjQueryを最短距離でマスターしよう。UIデザイン入門(目次)Webデザイナー、(X)HTML/CSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基本的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。/>00DESIGN初めてのjQuery:セレクターAPIを一挙解説(前編)jQueryのセレクターAPIでは、さまざまな方法で(X)HTML要素を指定できる。jQueryをWebデザインに利用する第一歩として、セレクターの使い方を覚えよう。00DESIGN初めてのjQuery:セレクターAPIを一挙解説(後編)jQueryのセレクターAPIでは、さまざまな方法で(X)HTML要素を指定できる。jQueryをWebデザインに利用する第一歩として、セレクターの使い方を覚えよう。00DESIGNサンプルで学ぶjQuery:(X)HTML/CSSを操作するjQueryには、(X)HTML/CSSを変更するさまざまな命令が用意されている。簡単なサンプルコードと実際の動作結果を見ながらマスターしよう。00DESIGNjQueryのイベントをチュートリアルで学ぶ(前編)Web制作向けのjQuery入門。今回はイベントの設定方法についてサンプルを交えて解説する。00DESIGNjQueryのイベントをチュートリアルで学ぶ(後編)Web制作向けのjQuery入門。今回はイベントの設定方法についてサンプルを交えて解説する。00DESIGNjQueryによるフォームのデザインの基礎(前編)WebデザイナーのためのjQuery入門。インタラクティブなフォームのデザインに役立つ機能を具体的なサンプルを交えて紹介する。00DESIGNjQueryによるフォームのデザインの基礎(後編)WebデザイナーのためのjQuery入門。インタラクティブなフォームのデザインに役立つ機能を具体的なサンプルを交えて紹介する。00DESIGNjQueryでAjaxを利用する基本チュートリアルWeb制作者が覚えておきたい、jQueryによるAjax(エイジャックス)の基本的な使い方をサンプルを交えて紹介する。00DESIGNjQueryによるアニメーションエフェクトの基本Web制作者のためjQuery入門。今回は、jQueryのアニメーションエフェクト機能の使い方をサンプルで紹介する。00DESIGNCSS3のセレクターで作るストライプテーブルWeb制作者のためjQuery入門。今回からは実践編として具体的な活用法を紹介する。初回はjQueryでストライプテーブルを作るチュートリアル。jQueryでフォトギャラリーを作成するサンプルを作ってみよう。00DESIGNjQueryでアコーディオンパネルUIを自作するWeb制作者のためのjQuery入門・実践編。アコーディオンパネルのUIをサンプルにチュートリアルで解説する。00DESIGNjQueryでタブパネルを作るチュートリアルWeb制作に役立つjQuery入門。定番のユーザーインターフェイス「タブパネル」の作り方を解説しよう。Ajax対応版への改造方法付き。00DESIGN透過PNG対応!jQueryでオリジナルツールチップWebサイト制作に役立つjQuery入門。今回はオリジナルのツールチップの作り方を解説する。透過GIF/透過PNGを使ったアレンジもあり。00DESIGNjQueryでロールオーバー!プリロード対応版デザイナー向けの初めてのjQuery。メニューバーにロールオーバー効果を付ける方法をチュートリアルで解説。プリロード(先読み)にも対応する。00DESIGNIE6対応!jQueryで透過PNGのロールオーバーを作るWeb制作で使えるjQueryの実践テクニック。透過PNG対応のロールオーバーの作り方を紹介する。6(IE6)でも表示できるクロスブラウザー対応版。00DESIGNjQueryで作る多階層ドロップダウンメニューjQueryとCSSによるWebデザイン入門。多階層(マルチレベル)対応のドロップダウンメニューの作り方をチュートリアルで解説する。00DESIGNjQueryによるLightbox風モーダルウィンドウの作り方jQueryとCSSで作るユーザーインターフェイス入門。ライトボックス風モーダルウィンドウの作り方をチュートリアルで解説する。00DESIGNjQueryで自作するフローティングウィンドウドラッグ&ドロップで動かせるフローティングウィンドウをCSS+jQueryで作ってみよう。IE対策のポイントも解説。00DESIGNjQueryでバリデーション付きメールフォームを作ろうWeb制作者のためのjQuery入門。今回はバリデーション(検証)機能付きの問い合わせフォームの作り方をチュートリアルで解説する。00DESIGNjQuery+CSSによるカルーセルパネルの作り方Web制作に活用するjQuery入門。アマゾンでおなじみの「カルーセル」(Carrousel)作り方をチュートリアルで解説する。タイマーを使った改造法付き。00DESIGNjQueryとAjaxで作るスムーズページングWebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。00DESIGN制作現場で役立つjQueryプラグインの使い方Web制作者のためのjQuery入門。今回と次回は、制作効率を上げる「jQueryプラグイン」の概要と使い方について解説する。00DESIGN実務で使えるjQueryプラグイン3選Web制作者のためのjQuery入門。最終回は、現場で使える便利なプラグインを3つ紹介。具体的な使い方もサンプル付きで解説する。00DESIGN40分で覚える!jQuery速習講座Webデザイナーやマークアップエンジニアのための超コンパクトなjQuery講座ができました。JavaScriptの予備知識は不要。Web制作に必要な要点だけを解説します。スマホお気に入り一覧マイページ。