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

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

スポンサーサイト

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

jQuery:スライドショー v2.0(横方向のスライドショー)

2011年 05月26日 (木 )
バージョン2のスライドショーは横方向のスライドショーを作成しました。

このスライドショーは右から左に画像がスライドします。
取りあえず実行結果はこんな感じです。


そしてサンプルコードはこんな感じです。


ループ間隔は2secで、スライド速度は800msecに設定してあります。
12行目で親要素に
position: relative;
overflow: hidden;

とし、
16,17行目で
position: absolute;
left: 100px;

としてスライドする要素を親要素の外に配置します。

そして37行目で
_element.eq(0).css("left", "0px");
として0番目の要素だけ親要素内に配置します。

あとはanimateでくるくる回し、
最後の要素(今回は3つ目の要素)まで来たら、
46-48行目のif文で_countに-1を設定します。
こうする事で50行目のアニメーションで0番目の要素を動かせるので
ループでスライド出来るようになっています。
ただこの部分がちょっと気持ち悪いコードなので、
そのうちきれいにする予定です。

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://pcrice.blog129.fc2.com/tb.php/152-03a12592
  ビジネスマンの徹底パソコン奮闘サイト  
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。