jQuery圖片切換外掛jquery.cycle.js使用範例_jquery

Cycle是一個很棒的jQuery圖片切換插件,提供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能

下載cycle插件並引入,此時,注意把引入它的程式碼放在引入jQuery主文件之後。

複製程式碼 程式碼如下:

jquery.cycle.all. js在示範程式碼中有。 Cycle外掛程式可以作用於頁面中的任何一組同儕元素。要展示這一點,我們需要一個簡單的 HTML文檔,文檔中是一個包含商品封面和相關資訊的列表,可以添加到HTML文檔的主體中： 複製程式碼

程式碼如下:

聯想A3000(8GB/白色) 娛樂平板電腦,手機平板電腦

三星GALAXY Note III 三星Note系列的第三代產品,配備5.7吋全高清炫麗螢幕(Super AMOLED), 解析度為1080P(1920*1080像素)

iPad Air iPad Air擁有令人驚嘆的iPad Air纖薄輕巧。透過一系列改進,我們將iPad Air 的體積比上一代iPad減小了近四分之一.儘管如此,當拿起它時,你仍會發覺它依然堅固耐用。

在CSS中加入一些樣式，就可以在頁面中顯示出來了 複製程式碼

程式碼如下:

html, body { margin: 0; padding: 0; >}

body { font: 62.5% Verdana, Helvetica, Arial, sans-serif; color: #000; background: #fff; } } background: #fff; } }

ul#goods { list-style: none; margin: 0; padding: 0; height: 210px; width: 500px ; ; } ul#goods li { list-style: none; margin: 0; padding: 0; height: 210px; width: 500px; background-color: #F79321; position: relative; } ul#goods li img { position: absolute; left: 0; position: absolute; left: 0; top: 0sol ; width: 300px; height: 210px; } ul#goods li .title { margin-left: 300px; padwidx; 180px; font-weight: bold; font-size: 1.2em; background-color: #000; color: #fff; overflow: hidden; }; ul#goods li .author { margin-left: 300px; padding: 10px 10px 0 10px; width: 180px font-weight: 180px; color: #F79321; color: #fff; } 透過Cycle外掛程式可以將此清單轉換成可以互動的幻燈片。在DOM中適當的容器上呼叫.cycle()方法,就可以實現此轉換。

複製程式碼

程式碼如下: $(document).ready(> $(document).ready(function() { $('#goods').cycle(); }); 這個語法簡單得不能再簡單了。和之前使用其他內建的jQuery方法一樣,我們也在一個包含DOM元素的jQuery物件上呼叫了

.cycle()。即使沒有提供任何參數 .cycle()也可以幫我們完成轉換工作。其中包括修改頁的樣式,

以便每次只顯示一個列表項,然後每4秒就以交叉淡入淡出的方式切換到下一個列表項，如圖 為插件方法指定參數

Cycle()方法為我們提供了非常多的參數,具體每個參數的具體作用在此不一一敘述,請查閱其他文檔

我們可以修改Cycle插件的兩個幻燈片之間的播放速度和動畫形式,修改幻燈片變換的觸發方式。 複製程式碼 程式碼如下: $(document).ready(>

$(document).ready(function() { $('#goods').cycle({ timeout: 2000, speed: 200, pause: true }); }); }); });

第一個timeout選項用來指定切換投影片之間等待的毫秒數(2000),而speed決定切換本身要花的毫秒數(200)。 在把pause設定為true的情況下,幻燈片會在滑鼠進入時暫停播放,這在幻燈片中包含可以點擊的連結時非常有用。 其中Cycle有一個很重要的參數：fx：作用是選擇特效。 複製程式碼

程式碼如下:

$('#goods').cycle({ fx:'fade', timeout: 2000, speed: 200, pause: true }); 包含以下特效blindX,cover, curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。 原始碼下載

jQuery圖片切換外掛jquery.cycle.js使用範例_jquery

相關文章