Blog

メインビジュアルを自動でゆっくりスライドさせて流す方法②

2013.02.13Cat:javascript デザイナー

前回に引き続きのテーマですが、
今回は方法がちょっと違います。

前回は、背景画像をスライドさせる形でしたが、
今回は、ul,liタグ使い、写真を複数置いたビジュアルをスライドさせた形になります。

それでは、DEMOをご覧下さい。

DEMO

margin-leftを使用し、ulをずらしています。
見えなくなった先頭の要素を一番後ろに入れて、、
というの繰り返して無限ループになるようになってます。

以下、javascritになります。

HTML

しかし、これは汎用性があるとはいえません。。。。
画像のサイズは指定しなければいけないですし、
画像の横幅も均一にしなければいけません。。。

横幅もバラバラの場合を都合上作ることができませんでした。

うーん、悔しい。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ