coin-slider是GitHub上的一個人氣JavaScript開源插件,用它來實現(xiàn)幻燈片效果只需要動手寫很少的代碼,下面我們就來看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.

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

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

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

先在網(wǎng)上搜索一下相關(guān)資料，某前輩已經(jīng)寫出了一個教程，并且自己做了一個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文件，是用來格式化幻燈片的相關(guān)樣式。我估計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í)行的時候，插件才能找到我們想要播出的圖片。它的圖片的寫法，也有幾個特點，就是如果你想點擊圖片跳轉(zhuǎn)到某鏈接，在外面加上a標簽；在img標簽后面，新建一個span標簽，里面的內(nèi)容，將會作為圖片的說明文字出現(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> //圖片對應(yīng)的說明

   Description for nemo

  </span>

 </a>

</div>

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

3，執(zhí)行操作

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

$(document).ready(function() {

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

});

當然，你也可以使用window.onload，那樣可以確?；脽羝瑘D片被完全下載下來之后，再出現(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標簽，以及相應(yīng)的id和class。既然你是高級用戶，當然難不倒你，我只是在這里提一個思路，具體的就要靠你自己去修改了。