« 選択した画像だけをポップアップしてくれるjQueryのプラグイン | トップページ | 簡単にスライドするリストが作れるjQueryのプラグイン »

2011年3月 7日 (月)

CSSとjQuery利用したスライドショー

スライドショーは色々あるのですが、今回はプラグインを利用せずにcssも利用したスライドショーをご紹介します。

CSSとjQuery利用したスライドショー「Automatic Image Slider w/ CSS & jQuery

デモページ

今回はステップが丁寧に書かれていらしゃるので、ポイントとなる部分を抜き出していこうと思います。

使用するリソース
jquery.js

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>

Styling – CSSの内容も記入します。

Step 4の解説
実行スクリプト
</body>の直前にスライドショーのオプションを実行するスクリプトを記述します。
スクリプトは下記の「制御するコードを記述します。」に記述します。

$(document).ready(function() {
//制御するコードを記述します。
});

Setting up the Image Slider項目
スクリプトを制御する項目です。スクリプトをアクティブにし、CSSで設定した大きさなどを実行しています。
スクリプトを実行するためにこの項目を記述します。

Setting up the Slider Function and Timer項目
スライドショーの始める順番やアニメーションのスピードなどを設定します。

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
スライドショーのアニメーション速度を決定します。
数字が小さいほど早くアニメーションします。

//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000); //時間を設定
};
スライドショーをする時間を設定します。
単位はミリ秒です。
7000ミリ秒=7秒

|

« 選択した画像だけをポップアップしてくれるjQueryのプラグイン | トップページ | 簡単にスライドするリストが作れるjQueryのプラグイン »

css」カテゴリの記事

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/39101163

この記事へのトラックバック一覧です: CSSとjQuery利用したスライドショー:

« 選択した画像だけをポップアップしてくれるjQueryのプラグイン | トップページ | 簡単にスライドするリストが作れるjQueryのプラグイン »