今天為了做一個模板，來收集幻燈片插件，最終確定了兩款比較合適的。coin-slider和nivoslider，為此，研究了一下午，從各個方面來實驗這兩款插件，究竟哪款比較適合、比較好。

當然，聰明的你看題目就已經知道了。我必須要吐槽一下nivoslider這個jquery插件。這兩款插件，在看官方的demo時，這個插件的效果要比coin-slider好一些。看了一下教程，可以自定義的參數(shù)較多，貌似功能要更強大一下。于是我就首先研究了一下這款插件的使用方法。由于網上教程比較少，大部分都是直接復制的官方教程，我就直接拿官方的demo代碼來看了。這一看，直接暈死。加載了N個css文件，以及各種圖片文件，當場暈死。demo里面的代碼，也是很多很亂，不是怕多、亂的代碼，就怕引用的各種文件各種效果的疊加，分析起來累死個人。

干脆自己按照步驟，自己寫個小demo，看一下這款插件的易用性怎么樣。按照官方的步驟，寫好了圖片鏈接，加載了需要的javascript文件等。打開一看，立刻沒有了官方demo的美觀和強大，上面的翻頁等，都是需要css定義，這個暫時沒有管理，所以難看就難看吧。圖片切換也算正常，不正常的地方就是，在某個地方，出現(xiàn)了下一張圖片的一大堆圖片塊。這種切換的原理很簡單，生成很多div，每個div用css中的background-position屬性，把整體的圖片切成塊，然后對每塊進行透明度等的變化，顯示的效果就是你看到的那種。但是現(xiàn)在，在旁邊出現(xiàn)了一堆塊都是亂的，直接無語。具體什么情況，我已經刪了，也不截圖了。估計是某塊css沒有定義好，當我打開官方demo的css時，又怵頭了，這么多，這么亂的代碼。功能的強大，必定面臨使用的難度提升，估計這個是給專家級用戶使用的，我等小白還是趁早溜走吧。研究了兩三個小時，無疾而終。轉身向coin-slider走去。

先在網上搜索一下相關資料，某前輩已經寫出了一個教程，并且自己做了一個demo，下載下來看了下，效果挺好，代碼挺少。同時也下載了官方的demo，打開官方demo，下面的說明，說的清清楚楚的。簡而言之就是：加載必備組件=》你自己寫圖片鏈接=》執(zhí)行那個操作。實事也是如此，可能我之前研究nivoslider，而coin-slider和它的原理和操作類似，所以我很快就上手并且做出了自己想要的效果。下面來依次講解：

1，加載必備組件

這個coin-slider是jquery的一個插件，開源項目地址：https://github.com/kopipejst/coin-slider

當然，離不開jquery。所以我們要加載三個項目：jquery、coin-slider和coin-slider-styles.css這三個。后面兩個就是這個插件包，最后的那個css文件，是用來格式化幻燈片的相關樣式。我估計nivoslider就是因為缺少了一個這個，所以才導致的亂，也有可能是我沒有發(fā)現(xiàn)這個東西。代碼如下：

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”coin-slider.min.js”></script>
<link rel=”stylesheet” href=”coin-slider-styles.css” type=”text/css” />

2，編寫你的圖片鏈接
我們首先需要指定一個帶有id的div標簽，這樣在第三步執(zhí)行的時候，插件才能找到我們想要播出的圖片。它的圖片的寫法，也有幾個特點，就是如果你想點擊圖片跳轉到某鏈接，在外面加上a標簽；在img標簽后面，新建一個span標簽，里面的內容，將會作為圖片的說明文字出現(xiàn)。直接看代碼：

<div id=”coin-slider”>
 <a href=”#” >
  <img src=”images/walle.jpg” >
  <span>
   Description for nem<br />oDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemo
  </span>
 </a>
 <a href=”#111”>
  <img src='images/nemo.jpg' > //加載的圖片
  <span> //圖片對應的說明
   Description for nemo
  </span>
 </a>
</div>

這個代碼的大體框架,是我從官方的demo中提取出來的,這里我又要吐槽一下了,官方的demo文件,寫的實在是太不規(guī)范了，html標簽都用的是大寫，而且從上面的img的src就可以看出來，他們竟然用了單引號！css文件里也是這樣，患有代碼強迫癥的潛行者m，花了好幾分鐘，才把大部分代碼變成小寫，添加合適的換號，真無語?？戳艘幌麻_發(fā)時間，2010年的作品，那時候xhtml應該普及了，為什么還用大寫的寫法，無語了。
3，執(zhí)行操作

確保上面兩個步驟完成之后，就需要觸發(fā)它的方法，來實現(xiàn)幻燈片的功能了。方法當然是

 $(document).ready(function() {
  $(‘#coin-slider').coinslider({ height:248 }); //使用各種參數(shù)配置來擴充他的功能
 });

當然，你也可以使用window.onload，那樣可以確保幻燈片圖片被完全下載下來之后，再出現(xiàn)幻燈片。
很顯然，還可以配置很多參數(shù)，讓幻燈片的功能更加強大。在上面的代碼中，我添加了一個參數(shù)height：248，因為我的照片高度是248px。下面介紹一下其他參數(shù)，我在官方注釋后面，小小的翻譯了一下，不準確的話，還望見諒。

width: 565, // width of slider panel 幻燈片的寬度
height: 290, // height of slider panel 幻燈片的高度
spw: 7, // squares per width 幻燈片切出小方框的寬度
sph: 5, // squares per height 幻燈片切出小方框的高度
delay: 3000, // delay between images in ms 切換圖片的時間，毫秒單位
sDelay: 30, // delay beetwen squares in ms 小方框變化的時間，毫秒單位（這兩個盡量不要改，官方說改了容易出現(xiàn)過度問題）
opacity: 0.7, // opacity of title and navigation 圖片下面的說明文字背景的透明度
titleSpeed: 500, // speed of title appereance in ms 標題消失的速度，毫秒單位
effect: ‘', // random, swirl, rain, straight 變換樣式，隨機，漩渦，下雨，連續(xù)（自己試試就知道效果）
navigation: true, // prev next and buttons 是否顯示前個、后個按鈕
links : true, // show images as links 是否把圖片當做一個鏈接
hoverPause: true // pause on hover 你把鼠標放上去的時候，圖片是否繼續(xù)變化

我們只需要像這樣，填上自己定義的參數(shù)即可：

$(‘#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });

4，高級用法
在具體的使用過程中，它的默認樣式，肯定不符合我的模板需求，所以我需要對它進行更加細致的修正。那就是通過css，官方的css文件里，你可以直接修改，你也可以新建css文件，對它進行定義。在火狐瀏覽器中，可以方便觀看這個插件生成了些什么div標簽，以及相應的id和class。既然你是高級用戶，當然難不倒你，我只是在這里提一個思路，具體的就要靠你自己去修改了。

最新評論