jQuery圖片切換插件jquery.cycle.js
阿新 • • 發佈：2017-05-31
eno csdn ron fontsize tle java on() -m 暫停
Cycle是一個很棒的jQuery圖片切換插件,提供了很好的功能來幫助大家更簡單的使用插件的幻燈功能
通過Cycle插件能夠將這個列表轉換成能夠交互的幻燈片。
包括下面特效blindX,cover,curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。
下載cycle插件並引入,此時,註意把引入它的代碼放在引入jQuery主文件之後。
<head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.js"></script> <link href="style.css" rel="stylesheet" type="text/css" > </head>
Cycle插件能夠作用於頁面中的不論什麽一組同輩元素。
為展示這一點,我們須要一個簡單的
HTML文檔,文檔中是一個包括商品封面和相關信息的列表,能夠加入到HTML文檔的主體中：
<ul id="goods"> <li> <img src="img/lenovopad.jpg" alt="lenove pad" /> <div class="title">聯想A3000(8GB/白色)</div> <div class="author">娛樂平板電腦,手機平板電腦 </div> </li> <li> <img src="img/note3.jpg" alt="note3" /> <div class="title">三星GALAXY Note III</div> <div class="author">三星Note系列的第三代產品,配備5.7英寸全高清炫麗屏(Super AMOLED), 分辨率為1080P(1920*1080像素)</div> </li> <li> <img src="img/ipadair.png" alt="ipadair" /> <div class="title">iPad Air</div> <div class="author">iPad Air擁有令人驚嘆的iPad Air纖薄輕巧。通過一系列改進,我們將iPad Air 的體積比上一代iPad減小了近四分之中的一個.雖然如此,當拿起它時,你仍會發覺它依舊牢固耐用。</div> </li> </ul>
html, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
ul#goods {
list-style: none;
margin: 0;
padding: 0;
height: 210px;
width: 500px;
overflow: hidden;
}
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;
top: 0;
width: 300px;
height: 210px;
}
ul#goods li .title {
margin-left: 300px;
padding: 10px;
width: 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: bold;
background-color: #F79321;
color: #fff;
}通過Cycle插件能夠將這個列表轉換成能夠交互的幻燈片。
在DOM中適當的容器上調用.cycle()方法,就能夠實現這一轉換。
$(document).ready(function() {
$(‘#goods‘).cycle();
});這個語法簡單得不能再簡單了。和之前使用其它內置的jQuery方法一樣,我們也在一個包括DOM元素的jQuery對象上調用了
.cycle()。即使沒有提供不論什麽參數 .cycle()也能夠幫我們完畢轉換工作。
當中包括改動頁面的樣式,
以便每次僅僅顯示一個列表項,然後每4秒就以交叉淡入淡出的方式切換到下一個列表項，如圖
為插件方法指定參數
Cycle()方法為我們提供了許多的參數,詳細每一個參數的詳細作用 在此不一一敘述,請查閱其它文檔
我們能夠改動Cycle插件的兩個幻燈片之間的播放速度和動畫形式,改動幻燈片變換的觸發方式。
$(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等等。
演示代碼：http://download.csdn.net/detail/itmyhome/7503119
jQuery圖片切換插件jquery.cycle.js