簡單的順序輪播
應用範圍:部落格刊頭、圖片show...等


<script type="text/javascript"> $(document).ready(function() {   var $rounditem = $('.rounditem').toArray();   var size = $rounditem.length;   var i = 0;   delayedUpdatelist(i);   function delayedUpdatelist(x) {    if(x < size){     $('.rounditem:eq('+x+')').fadeIn("slow").delay(2000).fadeOut("slow");     setTimeout(function(){ delayedUpdatelist(x+1) }, 3000);    } else {     x = 0;     $('.rounditem:eq('+x+')').fadeIn("slow").delay(2000).fadeOut("slow");     setTimeout(function(){ delayedUpdatelist(x+1) }, 3000);    }   } }); </script>


html 編輯為:
<img class="rounditem" style="display:none;" src="圖片網址" /> <img class="rounditem" style="display:none;" src="圖片網址" /> <img class="rounditem" style="display:none;" src="圖片網址" /> or <div class="rounditem">content</div> <div class="rounditem">content</div> <div class="rounditem">content</div>

會依照html先後順序去自動取得序列輪播
使用css美化定位即可,也可進階運用其餘html結合為想要的組合去輪播
class名稱可自定義

記得外插 jquery.min.js 文件
, , ,

Leah 發表在 痞客邦 PIXNET 留言(0) 人氣()