[Javascript] 圖片輪播的效果

圖片輪播的效果以前大都用 Flash Plugin 來搞定，現在強大的 jQuery 也能辦到了，jQuery Plugin 叫做 Cycle，使用方法如下：

include jQuery.js 和 cycle.js

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

將要輪播的圖片用 div 包著：

<div id="div1">
    <img src="01.jpg" width="200" height="200"  />
    <img src="02.jpg" width="200" height="200"  />
    <img src="03.jpg" width="200" height="200"  />
</div>

接下來寫一些 javascript 效果就出來了，效果有很多種，可以參考 Cycle 官網：

$('#div1').cycle({ 
    fx:'zoom', 
    sync:false, 
    delay:-2000 
});

如果圖片很多，那建議可以加上 Navigator ，不只能自動輪播，還能讓使用者自已手動換頁：

<style type="text/css">
    .nav { margin: 5px 0 }
    #nav a, #s7 strong { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
    #nav a.activeSlide { background: #ea0 }
    #nav a:focus { outline: none; }
</style>

$(function() {
    $('#div1').before('<div id="nav" class="nav">').cycle({
        fx: 'turnDown',
        timeout: 3000,
        pager: '#nav'
    });
});

想看執行效果如何，可以下載 Sample 看看。


參考連結：jQuery Cycle Plugin