研究 jQuery 輪播(轉場) 特效

1.InnerFade 範例 下載
http://medienfreunde.com/lab/innerfade/jquery.innerfade.zip
InnerFade 提供了三種輪播效果，我們可以在 index.htm 調整它的顯示速度及相關參數：

1. News輪播
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});


2. 圖片輪播
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});


3. 段落輪播
$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});


修改要輪播的資料:

1. News輪播
<ul id="news">
<li>
<a href="#n1">1 Lorem ipsum dolor</a>
</li>
<li>
<a href="#n2">2 Sit amet, consectetuer</a>
</li>
...
...
</ul>

2. 圖片輪播
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"><img src="images/ggbg.gif" alt="Good Guy bad Guy" /></a>
</li>
...
...
</ul>

3. 段落輪播
<div class="fade">
<p> 段落 1 </p>
<p> 段落 2 </p>
...
...
</div>


資料來源:
http://www.xt-commerce.cn/forum/archive/index.php/t-83.html


相關網站:
SmallSlider圖片輪播插件
http://www.d2nb.com/smallslider/index.html