使用 jQuery Cycle Plugin

學期初跟同學一起去修HTML5，我們都是對於HTML5有高度興趣的學生
但是上完這堂課後覺得好失敗Orz，都照著W3School範例念…
不過另一位講師『小朱』有提到一些比較重要觀念，但這些似乎都不是本文重點XD

其實是因為下禮拜要交期末作業了，老師要整體組員的介紹網頁
應該不用做其他一些應用，所以我就設計出如下圖的版面

我的版面大概就這麼簡單而已，但是照片要在輪播的同時跳到每個人的自我介紹
狗一下就找到『JQuery Cycle Plugin』，網頁上有使用說明
用JQuery Cycle Plugin是沒什麼問題啦…

反而我不知道該如何將Var Array的值撈出來，結果神人我同學用$.each方式撈出來
我是真的不太會網頁這塊的東西，不過至少看得懂XD

Head這段用外部連結方式將default.css套用到該網頁，也將jquery及jquery.cycle和自己寫得timer.js加入近來

Body這段當載入到body的動作就是init()，這段裡面就是只有兩個div去排版而已

body onload="init();

  


   
   
   
   
  

這個是timer.js
裡面主要有宣告好一個陣列，包涵了名稱、綽號以及星座的資訊
神人我同學在這邊將函數都寫成一個陣列方式
Kennedy.starcycle是針對圖片去做輪播
Kennedy.showprofile是針對個人資訊做輪播
Kennedy.create是將個人資訊透過迴圈方式去取得，並且印出到螢幕

var team = [
 {name:'xx佑', alias:'CY', constellation:'處女' },
 {name:'xx孝', alias:'jyunsiao', constellation:'天秤' },
 {name:'xx皓', alias:'Kennedy', constellation:'金牛' },
 {name:'xx宏', alias:'BIn', constellation:'巨蟹' },
 {name:'xx任', alias:'小雞', constellation:'天秤' }];

var Kennedy={};

Kennedy.starcycle = function() {
 $('#slider').cycle({   
  fx:    'fade',
  timeout:  1000,
  speed: 800 
 });
}
Kennedy.showprofile = function() {
 $('#teammateinfo').cycle({ 
     fx:    'scrollRight', 
     timeout:  1000,
  speed: 800
 });
}
Kennedy.create = function(){

 var i = 0;
 var teammateinfo = $('#teammateinfo');

 $.each(team, function() {
  var firstappend = "


姓名：" + team[i].name + "

暱稱：" 
  + team[i].alias + "

星座：" + team[i].constellation + "

";
  
  var hideappend = "


姓名：" + team[i].name + 
  "

暱稱：" + team[i].alias + "

星座：" + 
  team[i].constellation + "

";
  
  if(i == 0)
   teammateinfo.append(firstappend);
  else
   teammateinfo.append(firstappend);
    i++;
 });
}

function init(){
 Kennedy.create();
 Kennedy.starcycle();
 Kennedy.showprofile();
}

#slider{
 height: 450px;
 width: 600px;
 margin: 0 auto;
}

#teammateinfo{

 margin: 0 auto;
}
#teammateinfo > div{
 width: 200px;

}

成果大概就是這樣

對了，下面這張照片是我同學叫我放上去的
他說都沒有放他，他很不開心
他家住西門町，天龍人來也
缺錢找他就對了

參考資料：
http://api.jquery.com/jQuery.each/
http://jquery.malsup.com/cycle/