jQuery圖片切換插件jquery.cycle.js使用示例

2024-05-06 16:09:03

字體：大中小

來源：轉載

供稿：網友

Cycle供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能，下面是它的一個非常不錯的示例，大家可以學習下

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

下載cycle插件并引入,此時,注意把引入它的代碼放在引入jQuery主文件之后。

復制代碼代碼如下:

jquery.cycle.all.js在演示代碼中有。

Cycle插件可以作用于頁面中的任何一組同輩元素。為展示這一點,我們需要一個簡單的

HTML文檔,文檔中是一個包含商品封面和相關信息的列表,可以添加到HTML文檔的主體中：

復制代碼代碼如下:

<ul>
<li>
<img src="img/lenovopad.jpg" />
<div>聯想A3000(8GB/白色)</div>
<div>娛樂平板電腦,手機平板電腦 </div>
</li>
<li>
<img src="img/note3.jpg" />
<div>三星GALAXY Note III</div>
<div>三星Note系列的第三代產品,配備5.7英寸全高清炫麗屏(Super AMOLED),
分辨率為1080P(1920*1080像素)</div>
</li>
<li>
<img src="img/ipadair.png" />
<div>iPad Air</div>
<div>iPad Air擁有令人驚嘆的iPad Air纖薄輕巧。通過一系列改進,我們將iPad Air
的體積比上一代iPad減小了近四分之一.盡管如此,當拿起它時,你仍會發覺它依然堅固耐用。</div>
</li>
</ul>

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

復制代碼代碼如下:

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秒就以交叉淡入淡出的方式切換到下一個列表項，如圖