jQueryで画像をクロスフェードさせる

これをボディの中の貼り付けたい場所へ

◆HTML
<div id=”viewer”>
<img src=”img/photo01.jpg” width=”400″ height=”300″ alt=”” />
<img src=”img/photo02.jpg” width=”400″ height=”300″ alt=”” />
<img src=”img/photo03.jpg” width=”400″ height=”300″ alt=”” />
<img src=”img/photo04.jpg” width=”400″ height=”300″ alt=”” />
</div><!–/#viewer–>

記入順に画像が移り変わっていく。

4枚以上の画像を使用する際は単純に<img>ソースを追加します。

 

CSSを貼り付ける。

#viewer {
margin: 0 auto;
width: 400px;
height: 300px;
text-align: left;
overflow: hidden;
position: relative;
}

#viewer img {
top: 0;
left: 0;
position: absolute;
}

 

 

text-alignleft;で表示させたい場所を変えられる。

画像の大きさはちゃんと記入しておかないとうまく表示されない。

 

 

SCRIPTを貼り付ける

 

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script&gt;
<script type=”text/javascript”>
$(function(){
var setImg = ‘#viewer’;
var fadeSpeed = 1500;
var switchDelay = 5000;

$(setImg).children(‘img’).css({opacity:’0′});
$(setImg + ‘ img:first’).stop().animate({opacity:’1′,zIndex:’20’},fadeSpeed);

setInterval(function(){
$(setImg + ‘ :first-child’).animate({opacity:’0′},fadeSpeed).next(‘img’).animate({opacity:’1′},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
</script>

 

fadeSpeedはフェードするスピード
switchDelayは切り替わるタイミング時間
ここで調節できる。

 

 

http://black-flag.net/jquery/20110525-3120.html

ここでお世話になりました。

ありがとう。

 

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中