ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【WEB】 Jqueryでローテーションバナーを作ってみた

Jqueryを使ってローテーションバナーを作ってみました。

 

ローテーションバナーとは?

ローテーションバナーとは一定時間で画像が切り替わるバナーです。

Amazonでいえば赤枠の部分です。

f:id:win-friendof:20160330235645p:plain

 

これを実装するにはJqueryを使うのがベストです!

Jqueryの使い方についてはこちらを参考にしてください。

 

実装した結果がこんな感じになります。

 

今回使うのは「html/css」「JavaScript」「Jquery」の4つです。

まぁ、フロント側でいえば全てです(笑)

 

まずはHTMLとCSS

注意点としては、

●[position]プロパティで[absolute]を指定していい感じに重ねる。

●[list-style-type]の[none]を指定してリストのマークを消す。

この2つが出来ればCSSはオーケーです!

※IDとかはJSにも依存するので変えたい人は注意してください!

 

次にJSとJquery

今回はコンテンツを透明にする[opacity]を使ってみます。

簡単に言えば、

①4枚の画像を

②上から一枚ずつ消して

③最後の画像になった時に全部初期化させる

④ ②③を繰り返す

というまぁ、単純なやり方です。 

 

 

上記のソースコードをコピペすればたぶん使えるはずです!

※画像は自分で用意してね^^b

 

今回のローテーション画像はDeemoからお借りしました。