jQueryちょっと前まではコーポレートサイトのトップページによくあるローテーションバナー(というかスライドショー?)はFlashで作るのが当たり前でしたが、最近ではjavascriptで作成しているものが増えてきましたね。いうことでjQueryを使用してシンプルなスライドタイプのローテーションバナーを作成します。Linkボタンでスライドするバージョンもつくりました→html+cssの作成bannerというidを付けたdivにリストでマークアップした表示する画像を入れます。画像は全て同じサイズの方が良いでしょう。ここでは320×213の画像を4枚用意しました。/></a></li></ul></div>次にcssです。hidden」を指定すれば1枚だけ表示されますね。ulのwidthは全部の画像サイズを入れます。今回は312pxの画像を4枚使用しているので1280pxですね。bottom;}使用するメソッドについて「setInterval」は一定の間隔(時間)で処理を実行するメソッドです。「id=log」に1秒おきに「hoge」を追加したいというときはこんな感じになります。1000);「animate」は文字通りですがアニメーション効果をお手軽に再現してくれます。上記でマークアップした画像リストを一枚分だけ左にスライドさせたい場合はこうなります。"-320px"},"normal");第2引数には「slow」「normal」「fast」または数値入力でアニメーション速度を制御することができます。これだといくら実行しても-320pxからは動きません。スライドさせるには現在の位置から-320pxに移動させる必要があるんですね。現在の属性値はmargin-leftで取得することができますが、そのままでは「px」が入ってしまうので計算することができません。「parseInt」メソッドを使用すれば数値だけを取得することができます。ulの現在の「margin-left」を数値としてを取得する場合はこうです。ul").css("margin-left")));これらの組み合わせればなんだか出来そうです。最終的なコードあとは現在の画像の番号を見て、最後まできたら最初の画像に戻るという処理を入れるだけですね。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。