SAMPLE

圖片1

(五秒後漸變�)
圖片2

相關資料

官方網站:http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=162

展示網站:http://medienfreunde.com/lab/innerfade/

特色

以往��出好幾張圖片在�一個地方漸變輪播，大概會想到的方��是早期的GIF圖片檔案格�，就是使用FLASH的方�。jQuery plugin的Inner Fade�供了�樣的效果，但�外�供更多的設定，甚至��出文字的漸變�這個部份是讓我覺得�常特別的地方。

Inner Fade

基本用法為：(以下範例為五張圖片輪�漸隱漸�)

1.載入js檔案

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

2.設定漸隱漸�效果

<script type="text/javascript">
  $(document).ready(
    function(){
	$('ul#portfolio').innerfade({
	speed: 1000, 
	timeout: 5000,      
	type: 'sequence',   
	containerheight: '220px'
       });
    });
</script>

語法中speed是設定漸隱漸�秒數，範例中設定1000表示我們把秒數設定為1秒；timeout是設定�次漸隱漸��留秒數，範例中設定5000表示我們把�留秒數設定為5秒；type變化方�是設定輪播的方�，sequence表示��播放，如果設定�random就表示�隨機輪播的��。
3.html code

<ul id="portfolio">
    <li>
        <a href="URL1"><img src="images/ggbg.gif" alt="Good Guy bad Guy" /></a>
    </li>
 
    <li>
	<a href="URL2"><img src="images/whizzkids.gif" alt="Whizzkids" /></a>
    </li>					
 
    <li>
	<a href="URL3"><img src="images/km.jpg" alt="Königin Mutter" /></a>
    </li>					
 
    <li>
        <a href="URL4"><img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" /></a>
    </li>		
 
    <li>
        <a href="URL5"><img src="images/tuev.jpg" alt="TÃœV SÃœD Gruppe" /></a>
    </li>
</ul>

�論

一般在網站��中常常會用到圖片輪播的功能，�廣告�塊就常用到，目�大部分網站��此部份都是使用flash的製作方�，但flash必須�外製作動畫元素�編寫動作語法，相�來說jQuery plugin的Inner Fade�供了更簡便的方�便能�到效果，與flash製作方�相比也更節�專案的�本。有興趣的人�以試用看看!