* 画像でも文字でも、フェードイン・アウトで表示可能
設定
* animationtype: アニメーションの種類 (’fade’ 又は ‘slide’ (デフォルト値は ‘fade’)) * speed: フェイドの速さ (ミリ秒 又は ‘slow’,'normal’,'fast’(デフォルト値は’normal’)) * timeout: フェイド間の時間の設定 (ミリ秒(デフォルト値は2000)) * type: スライドショーの種類 (’sequence’,'random’,'random_start’(デフォルト値は’sequence’)) * containerheight: 囲んだ要素の高さ (デフォルト値はauto)
サンプル
<html> <head> <title>sample</title> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/jquery.innerfade.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#fadeIn01').innerfade({ speed: 4000, timeout: 4000, type: 'sequence', containerheight: '220px', }); $('#fadeIn02').innerfade({ speed: 8000, timeout: 8000, type: 'sequence', containerheight: '220px', }); }); </script> </head> <body> <ul id="fadeIn01"> <li> <img src="./images/mono/01.jpg" border="0" /> <a href="http://yahoo.co.jp"> src="./images/02.jpg" border="0" /></a> <img src="./images/mono/03.jpg" border="0" /> <a href="http://jp.msn.com"> src="./images/04.jpg" border="0" /></a> <img src="./images/mono/05.jpg" border="0" /> <a href="http://goole.co.jp"> src="./images/06.jpg" border="0" /></a> </li> <li> <img src="./images/01.jpg" border="0" /> <a href="http://yahoo.co.jp"> src="./images/02.jpg" border="0" /></a> <img src="./images/03.jpg" border="0" /> <a href="http://jp.msn.com"> src="./images/04.jpg" border="0" /></a> <img src="./images/05.jpg" border="0" /> <a href="http://goole.co.jp"> src="./images/06.jpg" border="0" /></a> </li> </ul> <ul id="fadeIn02"> <li> <img src="./images/07.jpg" border="0" /> <a href="http://yahoo.co.jp"> src="./images/mono/08.jpg" border="0" /></a> <img src="./images/09.jpg" border="0" /> <a href="http://jp.msn.com"> src="./images/mono/10.jpg" border="0" /></a> <img src="./images/11.jpg" border="0" /> <a href="http://goole.co.jp"> src="./images/mono/12.jpg" border="0" /></a> </li> <li> <img src="./images/07.jpg" border="0" /> <a href="http://yahoo.co.jp"> src="./images/08.jpg" border="0" /></a> <img src="./images/09.jpg" border="0" /> <a href="http://jp.msn.com"> src="./images/10.jpg" border="0" /></a> <img src="./images/11.jpg" border="0" /> <a href="http://goole.co.jp"> src="./images/12.jpg" border="0" /></a> </li> </ul> </body> </html>