0

クロスフェードするシンプルなイメージビューアー

fade-viewer

サイトトップページでよく見られる、フェードで切り替わるメイン画像を簡単に表示してくれるjQueryの「fade-viewer」、
極々シンプルにフェードを繰り返してくれるだけですが、汎用性が高いので使いやすいです。

 

デモサンプル

1.HTMLを記述

ID名「fade-viewer」と名付けたdiv要素の中に<img>タグで4枚画像を並べています。
※ID名は任意です。

 

2.CSSを記述

 <img>要素を親要素の<div>に対して「position:absolute;」にします。

 

3.JavaScriptを記述

 以上になります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > WEB DESIGN > jQuery > クロスフェードするシンプルなイメージビューアー