jQuery の Cycle で、フェードイン・フェードアウト切替のスライドショー

ホームページの案件で

「画像をFlashを使って切り替えて表示させたい。」

という要望が結構多い。

 

もちろん、Flashを使って画像をフェードイン&フェードアウトさせても良いのだが、

なんだFlashのソフトを立ち上げて、画像を読み込んで・・・

など、作成するのにある程度の時間を要するし、メンテナンスなんかの時も大変。

 

そこで、jQueryを使って画像を簡単にフェードイン&フェードアウトして切り替える方法をメモしておきます。

 

〔サンプル例〕

 

5つの画像を、フェードイン・フェードアウトのアニメーションで、順番に表示する。

1つの画像の表示時間は、2秒。

フェードイン・フェードアウトのアニメーション動作時間は、3秒。

 

1.それぞれのjavascriptを読み込む

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.cycle.all.js"></script>

 

2.javascriptのコードを記載

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-cycle' ) .cycle( {
        fx: 'fade',
        speed: 3000, 
        timeout: 2000
    } );
} );
// -->
</script>

【fx】
スライドが切り替わるアニメーションの種類を指定するオプション。 フェードイン・フェードアウトのアニメーションにするには、「fade」を指定。

【speed】
スライドが切り替わるアニメーション動作速度を指定するオプション。 3000ミリ秒を指定した。

【timeout】
スライド1つ1つの表示時間を指定するオプション。 2000ミリ秒を指定した。

 

3.htmlに画像を記載

</p>
<div id="jquery-cycle"><img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /></div>
<p>

 

 

以上。

参照元:http://alphasis.info/2011/07/jquery-cycle-fade/

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress