ビジネスマンの徹底パソコン奮闘サイト

お知らせ
2011-03-16: 目次を作成しました。
2010-09-17: Google Map 2 記事一覧を作成しました。
2010-07-03: Google Map 3 記事一覧を作成しました。

スポンサーサイト

--年 --月--日 (-- )
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery:スライドショー v3.0(フワッとしたスライドショー)

2011年 05月29日 (日 )
今回はフワッとしたスライドショーを作成していみました。
現在表示されている画像を拡大しながらフェードアウトさせています。

実行結果はこんな感じです。

そして実行結果はこんな感じです。


35行目で行っていることはスライドショーに使うdiv要素の並び替えです。
このまま行うと最後の要素である3番目のCの画像から
C→B→A→C→・・・
と逆回りになってしまいます。
なのでeachとprependで順番を入れ替えています。

あとはタイマーで1秒置きにアニメーションを実行します。
childrenとかlastとか沢山使っていますが、
やってることはアニメーションしたらその要素を
div.slideshow要素の先頭に移動しているだけです。

動作原理は、アニメーションが終わった要素を他の要素の裏側に行かせ
一番手前の要素をアニメーションさせる。
それを繰り返す事で今回のスライドショーが出来上がりました。

<<前のページ   ビジネスマンの徹底パソコン奮闘サイト  
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。