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

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

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

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

1，加載必備組件

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

當(dāng)然，離不開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)致的亂，也有可能是我沒有發(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，編寫你的圖片鏈接
我們首先需要指定一個(gè)帶有id的div標(biāo)簽，這樣在第三步執(zhí)行的時(shí)候，插件才能找到我們想要播出的圖片。它的圖片的寫法，也有幾個(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文件,寫的實(shí)在是太不規(guī)范了，html標(biāo)簽都用的是大寫，而且從上面的img的src就可以看出來(lái)，他們竟然用了單引號(hào)！css文件里也是這樣，患有代碼強(qiáng)迫癥的潛行者m，花了好幾分鐘，才把大部分代碼變成小寫，添加合適的換號(hào)，真無(wú)語(yǔ)?？戳艘幌麻_發(fā)時(shí)間，2010年的作品，那時(shí)候xhtml應(yīng)該普及了，為什么還用大寫的寫法，無(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)確的話，還望見諒。

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è)思路，具體的就要靠你自己去修改了。

最新評(píng)論