Cycle是一個很棒的jQuery圖片切換插件,提供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能下載cycle插件並引入,此時,注意把引入它的程式碼放在引入jQuery主文件之後。 複製程式碼 程式碼如下: < /script> <BR><link href="style.css" rel="stylesheet" type="text/css" > <br> <br><br> <br>jquery.cycle.all. js在示範程式碼中有。 <BR><div class="codetitle">Cycle外掛程式可以作用於頁面中的任何一組同儕元素。要展示這一點,我們需要一個簡單的<span><a style="CURSOR: pointer" data="5705" class="copybut" id="copybut5705" onclick="doCopy('code5705')">HTML文檔,文檔中是一個包含商品封面和相關資訊的列表,可以添加到HTML文檔的主體中： <U> 複製程式碼<div class="codebody" id="code5705"><BR><BR> 程式碼如下:<BR><BR> <BR><ul id="goods"> <BR><li> <BR><img src= "img/lenovopad.jpg" alt="lenove pad" /> <BR><div class="title">聯想A3000(8GB/白色) <BR><div class="author">娛樂平板電腦,手機平板電腦 <BR> <BR><li> <BR><img src="img/jQuery圖片切換外掛jquery.cycle.js使用範例_jquery.jpg" alt="jQuery圖片切換外掛jquery.cycle.js使用範例_jquery" /> <BR><div class= "title">三星GALAXY Note III <BR><div class="author">三星Note系列的第三代產品,配備5.7吋全高清炫麗螢幕(Super AMOLED), <BR>解析度為1080P(1920*1080像素) <BR> <BR><li> <BR><img src="img/jQuery圖片切換外掛jquery.cycle.js使用範例_jquery.png" alt="jQuery圖片切換外掛jquery.cycle.js使用範例_jquery" /> <BR><div class="title">iPad Air <BR><div class="author">iPad Air擁有令人驚嘆的iPad Air纖薄輕巧。透過一系列改進,我們將iPad Air 的體積比上一代iPad減小了近四分之一.儘管如此,當拿起它時,你仍會發覺它依然堅固耐用。 <BR> <BR> <div class="codetitle"><span> <a style="max-width:90%" data="83679" class="copybut" id="copybut83679" onclick="doCopy('code83679')">在CSS中加入一些樣式，就可以在頁面中顯示出來了<U>複製程式碼<div class="codebody" id="code83679"><BR><BR> 程式碼如下:<BR><BR> <br>html, body { <br>margin: 0; <BR>padding: 0; >} <BR><BR>body { <BR>font: 62.5% Verdana, Helvetica, Arial, sans-serif; <br>color: #000; <br>background: #fff; <BR>} <BR>} <BR>background: #fff; <BR>} <BR>} <BR> <BR>ul#goods { <BR>list-style: none; <BR>margin: 0; <BR>padding: 0; <BR>height: 210px; <BR>width: 500px <BR>; ; <BR>} <BR>ul#goods li { <BR>list-style: none; <BR>margin: 0; <BR>padding: 0; <BR>height: 210px; <BR>width: 500px; <BR>background-color: #F79321; <BR>position: relative; <BR>} <BR>ul#goods li img { <BR>position: absolute; <BR>left: 0; <BR>position: absolute; <BR>left: 0; <BR>top: 0sol ; <BR>width: 300px; <BR>height: 210px; <BR>} <BR>ul#goods li .title { <BR>margin-left: 300px; <BR>padwidx; 180px; <BR>font-weight: bold; <BR>font-size: 1.2em; <BR>background-color: #000; <BR>color: #fff; <BR>overflow: hidden; <BR>}; <BR>ul#goods li .author { margin-left: 300px; <BR>padding: 10px 10px 0 10px; <BR>width: 180px <div class="codetitle">font-weight: 180px; color: #F79321; <span>color: #fff; <a style="CURSOR: pointer" data="23200" class="copybut" id="copybut23200" onclick="doCopy('code23200')">} <U> 透過Cycle外掛程式可以將此清單轉換成可以互動的幻燈片。在DOM中適當的容器上呼叫.cycle()方法,就可以實現此轉換。 <div class="codebody" id="code23200"><BR><BR>複製程式碼<BR><BR> 程式碼如下:<🎜><🎜> <🎜>$(document).ready(><🎜> <🎜>$(document).ready(function() { <function() { <function() { <function() { <function(). 🎜>$('#goods').cycle(); <🎜>}); <🎜><🎜><BR>這個語法簡單得不能再簡單了。和之前使用其他內建的jQuery方法一樣,我們也在一個包含DOM元素的jQuery物件上呼叫了 <br><br>.cycle()。即使沒有提供任何參數 .cycle()也可以幫我們完成轉換工作。其中包括修改頁的樣式, <br><br>以便每次只顯示一個列表項,然後每4秒就以交叉淡入淡出的方式切換到下一個列表項，如圖<BR><IMG src="http://files.jb51.net/file_images/article/201406/20140616160447.jpeg?20145161658"> <BR>為插件方法指定參數<br><br>Cycle()方法為我們提供了非常多的參數,具體每個參數的具體作用在此不一一敘述,請查閱其他文檔<br><br>我們可以修改Cycle插件的兩個幻燈片之間的播放速度和動畫形式,修改幻燈片變換的觸發方式。 <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="4637" class="copybut" id="copybut4637" onclick="doCopy('code4637')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code4637"> <BR>$(document).ready(><BR> <BR>$(document).ready(function() { <function() { <function() { <function() { <function(). 🎜>$('#goods').cycle({ <BR>timeout: 2000, <BR>speed: 200, <BR>pause: true <BR>}); <BR>}); <BR>}); <br>}); <br><br><br> <BR>第一個timeout選項用來指定切換投影片之間等待的毫秒數(2000),而speed決定切換本身要花的毫秒數(200)。 <div class="codetitle"><span>在把pause設定為true的情況下,幻燈片會在滑鼠進入時暫停播放,這在幻燈片中包含可以點擊的連結時非常有用。 <a style="CURSOR: pointer" data="86884" class="copybut" id="copybut86884" onclick="doCopy('code86884')"><U>其中Cycle有一個很重要的參數：fx：作用是選擇特效。 <div class="codebody" id="code86884">複製程式碼<BR><BR><BR> 程式碼如下:<BR><BR> <BR>$('#goods').cycle({ <BR>fx:'fade', timeout: 2000, <BR>speed: 200, <br>pause: true <br>}); <A href="http://xiazai.jb51.net/201406/yuanma/Cycle_jb51.net.zip" target=_blank> <🎜>包含以下特效blindX,cover, curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。 <🎜><🎜><🎜>原始碼下載<🎜>
