想要讓網站有圖片輪播的特效很困難嗎?還要使用Flash才能做到嗎?現在不必了,只要利用JQuery並搭配幾張圖片,就可以達到我們所需的特效囉!在jQuery中,有個Plugin叫做「jQuery Cycle Plugin」,專們用來處理圖片輪播特效的外掛,使用方式非常的簡單,而且跑起來也蠻順暢的,也不必擔心使用者電腦如果沒有flash播放器,造成特效失敗的問題。 很多網站逐漸透過jQuery來取代Flash的一些特效,再加上現在HTML5是趨勢,很多東西都是透過JS並搭配HTML5來時做的,大家或許會擔心瀏覽器對Javascript處理的效能,別擔心,現在各家瀏覽器的開發重點大多著重在Javascript的處理效能上,所以在網站跑JS不會再跟以前一樣非常的吃電腦資源了,而且速度也快很多呢!利用jQuery Cycle Plugin這個jQuery外掛可以做到什麼樣的特效呢?首先,jQuery是跨瀏覽器的,所以使用上不必擔心個瀏覽器的相容問題,至於特效,在外掛的官方,展示6種圖片輪播的特效,這些特效分別是:shuffle、zoom、fade、turnDown、curtainX、scrollRight (click),如果要把特效翻譯成中文,感覺怪怪的,還是讓大家直接看官方特效展示會比較快。 jQuery Cycle Plugin 網頁圖片輪播特效 〈手機收購 〉 外掛名稱:jQuery Cycle Plugin 官方網站:http://jquery.malsup.com/cycle/ 外掛下載:按這裡 (記得先服用jQuery) 第1步 首先,網頁內要先引入jQuery和jQuery Cycle Plugin兩隻JS檔案,檔案的路徑請自行調整好。載入的順序盡量不要調動,否則很可能發生錯誤。語法請加入到「」標籤之前。

第2步 接著在網頁的body內寫上以下語法,其中的「

」是採用css背景圖片的方式呼叫出圖片,如果你習慣用img語法,那你也可以全部改成img語法輸出圖片,這樣可以簡化CSS的部分,但相對的html檔案就會比較多語法(在此只先使用4張圖片輪播)。 jQuery Cycle Plugin 網頁圖片輪播特效 第3步 接著請您準備四張圖片(在此圖片是使用600*450),再來我們要刻CSS了。接著請按照下圖key入第一部分「#sider」的CSS語法,對應到HTML的「

」語法中設定了區塊的高和寬;接著下方的「.show1」這邊對應的就是「
arrow
arrow

    新澄3C 發表在 痞客邦 留言(0) 人氣()