Ching Wei : This is My Life - 工作、攝影、旅遊

發現一個可以很簡單就做出輪播功能的方法。
jQuery Cycle Plugin
1.首先載入jquery.cycle.all.pack.js及jquery-1.2.6.min.js

  <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  <script src="jquery.cycle.all.pack.js" type="text/javascript"></script>

2.設定CSS

.pics { 
  height: 232px;
  width: 232px;
  padding:0;
  margin:0;
  overflow: hidden;
}
.pics img { 
  height: 200px;
  width: 200px;
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #eee;
  top:0; left:0
}

3.設定輪播的資料

4.設定輪播

  $('#fade').cycle({
   timeout: 2000,
   speed: 300,
   pause: 1
  });

結果如下：