使用jquery插件coin-slider輕鬆打造幻燈片教程

1，加載必備組件

（下接：http://ce.sysu.edu.cn/hope2008/Education/UploadFiles_5303/201008/2010082521003053.rar）

這個coin-slider是jquery的一個插件，固然離不開jquery了。因此咱們要加載三個項目：jquery、coin-slider和coin-slider-styles.css這三個。後面兩個就是這個插件包，最後的那個css文件，是用來格式化幻燈片的相關樣式。我估計nivoslider就是由於缺乏了一個這個，因此才致使的亂，也有多是我沒有發現這個東西。代碼以下：

<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標籤，這樣在第三步執行的時候，插件才能找到咱們想要播出的圖片。它的圖片的寫法，也有幾個特色，就是若是你想點擊圖片跳轉到某連接，在外面加上a標籤；在img標籤後面，新建一個span標籤，裏面的內容，將會做爲圖片的說明文字出現。直接看代碼：

<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文件,寫的實在是太不規範了，html標籤都用的是大寫，並且從上面的img的src就能夠看出來，他們居然用了單引號！css文件裏也是這樣，患有代碼強迫症的潛行者m，花了好幾分鐘，才把大部分代碼變成小寫，添加合適的換號，真無語。看了一下開發時間，2010年的做品，那時候xhtml應該普及了，爲何還用大寫的寫法，無語了。

 

 

3，執行操做

確保上面兩個步驟完成以後，就須要觸發它的方法，來實現幻燈片的功能了。方法固然是
    $(document).ready(function() {
        $('#coin-slider').coinslider({ height:248 }); //使用各類參數配置來擴充他的功能

 

 

    });

固然，你也可使用window.onload，那樣能夠確保幻燈片圖片被徹底下載下來以後，再出現幻燈片。
很顯然，還能夠配置不少參數，讓幻燈片的功能更增強大。在上面的代碼中，我添加了一個參數height：248，由於個人照片高度是248px。下面介紹一下其餘參數，我在官方註釋後面，小小的翻譯了一下，不許確的話，還望見諒。
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 小方框變化的時間，毫秒單位（這兩個儘可能不要改，官方說改了容易出現過分問題）
opacity: 0.7, // opacity of title and navigation 圖片下面的說明文字背景的透明度
titleSpeed: 500, // speed of title appereance in ms 標題消失的速度，毫秒單位
effect: '', // random, swirl, rain, straight 變換樣式，隨機，漩渦，下雨，連續（本身試試就知道效果）
navigation: true, // prev next and buttons 是否顯示前個、後個按鈕
links : true, // show images as links  是否把圖片當作一個連接
hoverPause: true // pause on hover 你把鼠標放上去的時候，圖片是否繼續變化
咱們只須要像這樣，填上本身定義的參數便可：
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
4，高級用法
在具體的使用過程當中，它的默認樣式，確定不符合個人模板需求，因此我須要對它進行更加細緻的修正。那就是經過css，官方的css文件裏，你能夠直接修改，你也能夠新建css文件，對它進行定義。在火狐瀏覽器中，能夠方便觀看這個插件生成了些什麼div標籤，以及相應的id和class。既然你是高級用戶，固然難不倒你，我只是在這裏提一個思路，具體的就要靠你本身去修改了。

 

後續有不少開發填坑的文章發佈，若是對你有幫助，請支持和加關注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0