jQuery圖片切換插件jquery.cycle.js使用示例
更新時間：2014年06月16日 16:05:59 投稿：whsnow
Cycle供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能，下面是它的一個非常不錯的示例，大家可以學習下
Cycle是一個很棒的jQuery圖片切換插件,提供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能
下載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>
jquery.cycle.all.js在演示代碼中有。
Cycle插件可以作用于頁面中的任何一組同輩元素。為展示這一點,我們需要一個簡單的
HTML文檔,文檔中是一個包含商品封面和相關(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">娛樂平板電腦,手機平板電腦 </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纖薄輕巧。通過一系列改進,我們將iPad Air
的體積比上一代iPad減小了近四分之一.盡管如此,當拿起它時,你仍會發(fā)覺它依然堅固耐用。</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插件可以將這個列表轉(zhuǎn)換成可以交互的幻燈片。在DOM中適當?shù)娜萜魃险{(diào)用.cycle()方法,就可以實現(xiàn)這一轉(zhuǎn)換。
$(document).ready(function() {
$('#goods').cycle();
});
這個語法簡單得不能再簡單了。和之前使用其他內(nèi)置的jQuery方法一樣,我們也在一個包含DOM元素的jQuery對象上調(diào)用了
.cycle()。即使沒有提供任何參數(shù) .cycle()也可以幫我們完成轉(zhuǎn)換工作。其中包括修改頁面的樣式,
以便每次只顯示一個列表項,然后每4秒就以交叉淡入淡出的方式切換到下一個列表項，如圖
為插件方法指定參數(shù)
Cycle()方法為我們提供了非常多的參數(shù),具體每個參數(shù)的具體作用 在此不一一敘述,請查閱其他文檔
我們可以修改Cycle插件的兩個幻燈片之間的播放速度和動畫形式,修改幻燈片變換的觸發(fā)方式。
$(document).ready(function() {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});
第一個timeout選項用于指定切換幻燈片之間等待的毫秒數(shù)(2000),而speed決定切換本身要花的毫秒數(shù)(200)。
在把pause設置為true的情況下,幻燈片會在鼠標進入時暫停播放,這在幻燈片中包含可以單擊的鏈接時非常有用。
其中Cycle有一個很重要的參數(shù)：fx：作用是選擇特效。
$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});
包括以下特效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>
jquery.cycle.all.js在演示代碼中有。
Cycle插件可以作用于頁面中的任何一組同輩元素。為展示這一點,我們需要一個簡單的
HTML文檔,文檔中是一個包含商品封面和相關(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">娛樂平板電腦,手機平板電腦 </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纖薄輕巧。通過一系列改進,我們將iPad Air
的體積比上一代iPad減小了近四分之一.盡管如此,當拿起它時,你仍會發(fā)覺它依然堅固耐用。</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插件可以將這個列表轉(zhuǎn)換成可以交互的幻燈片。在DOM中適當?shù)娜萜魃险{(diào)用.cycle()方法,就可以實現(xiàn)這一轉(zhuǎn)換。
復制代碼 代碼如下:
$(document).ready(function() {
$('#goods').cycle();
});
這個語法簡單得不能再簡單了。和之前使用其他內(nèi)置的jQuery方法一樣,我們也在一個包含DOM元素的jQuery對象上調(diào)用了
.cycle()。即使沒有提供任何參數(shù) .cycle()也可以幫我們完成轉(zhuǎn)換工作。其中包括修改頁面的樣式,
以便每次只顯示一個列表項,然后每4秒就以交叉淡入淡出的方式切換到下一個列表項，如圖
為插件方法指定參數(shù)
Cycle()方法為我們提供了非常多的參數(shù),具體每個參數(shù)的具體作用 在此不一一敘述,請查閱其他文檔
我們可以修改Cycle插件的兩個幻燈片之間的播放速度和動畫形式,修改幻燈片變換的觸發(fā)方式。
復制代碼 代碼如下:
$(document).ready(function() {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});
第一個timeout選項用于指定切換幻燈片之間等待的毫秒數(shù)(2000),而speed決定切換本身要花的毫秒數(shù)(200)。
在把pause設置為true的情況下,幻燈片會在鼠標進入時暫停播放,這在幻燈片中包含可以單擊的鏈接時非常有用。
其中Cycle有一個很重要的參數(shù)：fx：作用是選擇特效。
復制代碼 代碼如下:
$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});
包括以下特效blindX,cover,curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。
源碼下載
相關(guān)文章
這篇文章主要介紹了jQuery獲取選中內(nèi)容及設置元素屬性的方法，需要的朋友可以參考下2014-07-07
項目用到了jquery的表單校驗插件validate，但在ie8下有bug，下面有個不錯的解決方法，需要的朋友可以參考下2013-11-11
jqGrid可以綁定XML,JSON和數(shù)組三種類型的數(shù)據(jù)。接下來通過本文給大家介紹jqGrid用法的相關(guān)知識，感興趣的朋友一起學習吧2016-06-06
jQuery實現(xiàn)復選框全選/取消全選/反選及獲得選擇的值
這篇文章主要介紹了jQuery實現(xiàn)的復選框全選/取消全選/反選及獲得選擇的值,需要的朋友可以參考下2014-06-06
jQuery實現(xiàn)單擊按鈕遮罩彈出對話框效果(2)
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)單擊按鈕遮罩彈出對話框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
使用jQuery Mobile框架開發(fā)移動端Web App的入門教程
jQuery Mobile是移動端的基于jQuery的Web前端開發(fā)框架,移動設備上的瀏覽器對HTML5的支持普遍較強,因而jQuery Mobile的UI設計主要針對HTML5,下面就來詳細看一下使用jQuery Mobile框架開發(fā)移動端Web App的入門教程2016-05-05
treepanel動態(tài)加載數(shù)據(jù)實現(xiàn)代碼
本文介紹一個treepanel動態(tài)加載數(shù)據(jù)的例子，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了jQuery實現(xiàn)的多滑動門，多選項卡效果代碼,具有tab切換與滑動門的功能,涉及鼠標事件的響應與頁面元素屬性動態(tài)變換操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-03-03
JQuery 確定css方框模型（盒模型Box Model）
做過前臺設置的都知道css存在兩種盒模型，W3C標準的方框模型和IE瀏覽器的方框模型。除IE以外的大多數(shù)瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據(jù)頁面的呈現(xiàn)模式的定義而是用對性的方框模式。已用哪中呈現(xiàn)的模式取決于頁面上的DOCTYPE的聲明。2010-01-01
這篇文章主要介紹了jQuery AjaxUpload 上傳圖片代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02