jQuery圖片切換插件jquery.cycle.js

sosoft_ljy 8年前發布 | 25K 次閱讀 jQuery HTML JavaScript開發

來自： http://blog.csdn.net/itmyhome1990/article/details/30480141

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文檔,文檔中是一個包含商品封面和相關信息的列表,可以添加到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>
在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秒就以交叉淡入淡出的方式切換到下一個列表項，如圖

為插件方法指定參數

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

 本文由用戶 sosoft_ljy 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！