coin-slider是GitHub上的一個(gè)人氣JavaScript開(kāi)源插件,用它來(lái)實(shí)現(xiàn)幻燈片效果只需要?jiǎng)邮謱?xiě)很少的代碼,下面我們就來(lái)看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.

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

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

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

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

1，加載必備組件

這個(gè)coin-slider是jquery的一個(gè)插件，開(kāi)源項(xiàng)目地址：https://github.com/kopipejst/coin-slider

當(dāng)然，離不開(kāi)jquery。所以我們要加載三個(gè)項(xiàng)目：jquery、coin-slider和coin-slider-styles.css這三個(gè)。后面兩個(gè)就是這個(gè)插件包，最后的那個(gè)css文件，是用來(lái)格式化幻燈片的相關(guān)樣式。我估計(jì)nivoslider就是因?yàn)槿鄙倭艘粋€(gè)這個(gè)，所以才導(dǎo)致的亂，也有可能是我沒(méi)有發(fā)現(xiàn)這個(gè)東西。代碼如下：

<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，編寫(xiě)你的圖片鏈接

我們首先需要指定一個(gè)帶有id的div標(biāo)簽，這樣在第三步執(zhí)行的時(shí)候，插件才能找到我們想要播出的圖片。它的圖片的寫(xiě)法，也有幾個(gè)特點(diǎn)，就是如果你想點(diǎn)擊圖片跳轉(zhuǎn)到某鏈接，在外面加上a標(biāo)簽；在img標(biāo)簽后面，新建一個(gè)span標(biāo)簽，里面的內(nèi)容，將會(huì)作為圖片的說(shuō)明文字出現(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> //圖片對(duì)應(yīng)的說(shuō)明

   Description for nemo

  </span>

 </a>

</div>

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

3，執(zhí)行操作

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

$(document).ready(function() {

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

});

當(dāng)然，你也可以使用window.onload，那樣可以確?；脽羝瑘D片被完全下載下來(lái)之后，再出現(xiàn)幻燈片。

很顯然，還可以配置很多參數(shù)，讓幻燈片的功能更加強(qiáng)大。在上面的代碼中，我添加了一個(gè)參數(shù)height：248，因?yàn)槲业恼掌叨仁?48px。下面介紹一下其他參數(shù)，我在官方注釋后面，小小的翻譯了一下，不準(zhǔn)確的話，還望見(jiàn)諒。

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 切換圖片的時(shí)間，毫秒單位

sDelay: 30, // delay beetwen squares in ms 小方框變化的時(shí)間，毫秒單位（這兩個(gè)盡量不要改，官方說(shuō)改了容易出現(xiàn)過(guò)度問(wèn)題）

opacity: 0.7, // opacity of title and navigation 圖片下面的說(shuō)明文字背景的透明度

titleSpeed: 500, // speed of title appereance in ms 標(biāo)題消失的速度，毫秒單位

effect: ‘', // random, swirl, rain, straight 變換樣式，隨機(jī)，漩渦，下雨，連續(xù)（自己試試就知道效果）

navigation: true, // prev next and buttons 是否顯示前個(gè)、后個(gè)按鈕

links : true, // show images as links 是否把圖片當(dāng)做一個(gè)鏈接

hoverPause: true // pause on hover 你把鼠標(biāo)放上去的時(shí)候，圖片是否繼續(xù)變化

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

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

4，高級(jí)用法

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