jQuery圖片切換插件jquery.cycle.js使用示例
更新時(shí)間：2014年06月16日 16:05:59 投稿：whsnow
Cycle供了非常好的功能來(lái)幫助大家更簡(jiǎn)單的使用插件的幻燈功能，下面是它的一個(gè)非常不錯(cuò)的示例，大家可以學(xué)習(xí)下
Cycle是一個(gè)很棒的jQuery圖片切換插件,提供了非常好的功能來(lái)幫助大家更簡(jiǎn)單的使用插件的幻燈功能
下載cycle插件并引入,此時(shí),注意把引入它的代碼放在引入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>
jquery.cycle.all.js在演示代碼中有。
Cycle插件可以作用于頁(yè)面中的任何一組同輩元素。為展示這一點(diǎn),我們需要一個(gè)簡(jiǎn)單的
HTML文檔,文檔中是一個(gè)包含商品封面和相關(guān)信息的列表,可以添加到HTML文檔的主體中：
<ul id="goods">
<li>
<img src="img/lenovopad.jpg" alt="lenove pad" />
<div class="title">聯(lián)想A3000(8GB/白色)</div>
<div class="author">娛樂(lè)平板電腦,手機(jī)平板電腦 </div>
</li>
<li>
<img src="img/note3.jpg" alt="note3" />
<div class="title">三星GALAXY Note III</div>
<div class="author">三星Note系列的第三代產(chǎn)品,配備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纖薄輕巧。通過(guò)一系列改進(jìn),我們將iPad Air
的體積比上一代iPad減小了近四分之一.盡管如此,當(dāng)拿起它時(shí),你仍會(huì)發(fā)覺(jué)它依然堅(jiān)固耐用。</div>
</li>
</ul>
在CSS中加入一些樣式，就可以在頁(yè)面中顯示出來(lái)了
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;
}
通過(guò)Cycle插件可以將這個(gè)列表轉(zhuǎn)換成可以交互的幻燈片。在DOM中適當(dāng)?shù)娜萜魃险{(diào)用.cycle()方法,就可以實(shí)現(xiàn)這一轉(zhuǎn)換。
$(document).ready(function() {
$('#goods').cycle();
});
這個(gè)語(yǔ)法簡(jiǎn)單得不能再簡(jiǎn)單了。和之前使用其他內(nèi)置的jQuery方法一樣,我們也在一個(gè)包含DOM元素的jQuery對(duì)象上調(diào)用了
.cycle()。即使沒(méi)有提供任何參數(shù) .cycle()也可以幫我們完成轉(zhuǎn)換工作。其中包括修改頁(yè)面的樣式,
以便每次只顯示一個(gè)列表項(xiàng),然后每4秒就以交叉淡入淡出的方式切換到下一個(gè)列表項(xiàng)，如圖
為插件方法指定參數(shù)
Cycle()方法為我們提供了非常多的參數(shù),具體每個(gè)參數(shù)的具體作用 在此不一一敘述,請(qǐng)查閱其他文檔
我們可以修改Cycle插件的兩個(gè)幻燈片之間的播放速度和動(dòng)畫(huà)形式,修改幻燈片變換的觸發(fā)方式。
$(document).ready(function() {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});
第一個(gè)timeout選項(xiàng)用于指定切換幻燈片之間等待的毫秒數(shù)(2000),而speed決定切換本身要花的毫秒數(shù)(200)。
在把pause設(shè)置為true的情況下,幻燈片會(huì)在鼠標(biāo)進(jìn)入時(shí)暫停播放,這在幻燈片中包含可以單擊的鏈接時(shí)非常有用。
其中Cycle有一個(gè)很重要的參數(shù)：fx：作用是選擇特效。
$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});
包括以下特效blindX,cover,curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。
源碼下載
下載cycle插件并引入,此時(shí),注意把引入它的代碼放在引入jQuery主文件之后。
復(fù)制代碼 代碼如下:
<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>
jquery.cycle.all.js在演示代碼中有。
Cycle插件可以作用于頁(yè)面中的任何一組同輩元素。為展示這一點(diǎn),我們需要一個(gè)簡(jiǎn)單的
HTML文檔,文檔中是一個(gè)包含商品封面和相關(guān)信息的列表,可以添加到HTML文檔的主體中：
復(fù)制代碼 代碼如下:
<ul id="goods">
<li>
<img src="img/lenovopad.jpg" alt="lenove pad" />
<div class="title">聯(lián)想A3000(8GB/白色)</div>
<div class="author">娛樂(lè)平板電腦,手機(jī)平板電腦 </div>
</li>
<li>
<img src="img/note3.jpg" alt="note3" />
<div class="title">三星GALAXY Note III</div>
<div class="author">三星Note系列的第三代產(chǎn)品,配備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纖薄輕巧。通過(guò)一系列改進(jìn),我們將iPad Air
的體積比上一代iPad減小了近四分之一.盡管如此,當(dāng)拿起它時(shí),你仍會(huì)發(fā)覺(jué)它依然堅(jiān)固耐用。</div>
</li>
</ul>
在CSS中加入一些樣式，就可以在頁(yè)面中顯示出來(lái)了
復(fù)制代碼 代碼如下:
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;
}
通過(guò)Cycle插件可以將這個(gè)列表轉(zhuǎn)換成可以交互的幻燈片。在DOM中適當(dāng)?shù)娜萜魃险{(diào)用.cycle()方法,就可以實(shí)現(xiàn)這一轉(zhuǎn)換。
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$('#goods').cycle();
});
這個(gè)語(yǔ)法簡(jiǎn)單得不能再簡(jiǎn)單了。和之前使用其他內(nèi)置的jQuery方法一樣,我們也在一個(gè)包含DOM元素的jQuery對(duì)象上調(diào)用了
.cycle()。即使沒(méi)有提供任何參數(shù) .cycle()也可以幫我們完成轉(zhuǎn)換工作。其中包括修改頁(yè)面的樣式,
以便每次只顯示一個(gè)列表項(xiàng),然后每4秒就以交叉淡入淡出的方式切換到下一個(gè)列表項(xiàng)，如圖
為插件方法指定參數(shù)
Cycle()方法為我們提供了非常多的參數(shù),具體每個(gè)參數(shù)的具體作用 在此不一一敘述,請(qǐng)查閱其他文檔
我們可以修改Cycle插件的兩個(gè)幻燈片之間的播放速度和動(dòng)畫(huà)形式,修改幻燈片變換的觸發(fā)方式。
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});
第一個(gè)timeout選項(xiàng)用于指定切換幻燈片之間等待的毫秒數(shù)(2000),而speed決定切換本身要花的毫秒數(shù)(200)。
在把pause設(shè)置為true的情況下,幻燈片會(huì)在鼠標(biāo)進(jìn)入時(shí)暫停播放,這在幻燈片中包含可以單擊的鏈接時(shí)非常有用。
其中Cycle有一個(gè)很重要的參數(shù)：fx：作用是選擇特效。
復(fù)制代碼 代碼如下:
$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});
包括以下特效blindX,cover,curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。
源碼下載
您可能感興趣的文章:
- 基于Jquery的簡(jiǎn)單圖片切換效果
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- jQuery 一個(gè)圖片切換的插件
- jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動(dòng)畫(huà)滑動(dòng)圖片切換效果
- 一個(gè)基于jquery的圖片切換效果
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery簡(jiǎn)單實(shí)現(xiàn)banner圖片切換
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)圖片切換效果
相關(guān)文章
點(diǎn)擊后可以輸入排序的數(shù)字編號(hào)，移開(kāi)后自動(dòng)更新數(shù)據(jù)庫(kù)。2010-02-02
jquery實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
本文主要介紹了用的jqueryRotate插件實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能的方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了jQuery 實(shí)現(xiàn)動(dòng)態(tài)粒子效果的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面的方法
這篇文章主要介紹了JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Jquery遍歷節(jié)點(diǎn)的方法有next、nextAll、prev、prevAll、siblings等等，大家可以根據(jù)自己的需求自由選擇2014-01-01
jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤(pán)控制綜合效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤(pán)控制綜合效果的方法,實(shí)例分析了jQuery操作div塊拖動(dòng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
22點(diǎn)關(guān)于jquery性能優(yōu)化的建議
討論 jQuery 和 javascript 性能的文章并不罕見(jiàn)。然而，本文我計(jì)劃總結(jié)一些速度方面的技巧和我本人的一些建議，來(lái)提升你的 jQuery 和 javascript 代碼。好的代碼會(huì)帶來(lái)速度的提升?？焖黉秩竞晚憫?yīng)意味著更好的用戶(hù)體驗(yàn)。2014-05-05
JQuery UI有著非常豐富的皮膚，JQuery官方提供的就有十幾套，除了官方提供的之外，JQuery還提供了定制皮膚的服務(wù)2009-07-07
jQuery HTML設(shè)置內(nèi)容和屬性操作實(shí)例分析
這篇文章主要介紹了jQuery HTML設(shè)置內(nèi)容和屬性操作,結(jié)合實(shí)例形式分析了jQuery HTML設(shè)置內(nèi)容和屬性相關(guān)函數(shù)與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了jquery自定義右鍵菜單、全選、不連續(xù)選擇的相關(guān)資料,需要的朋友可以參考下2016-03-03