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> //圖片對應的說明 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,那樣可以確?;脽羝瑘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標簽,以及相應的id和class。既然你是高級用戶,當然難不倒你,我只是在這里提一個思路,具體的就要靠你自己去修改了。
相關(guān)文章
jQuery插件MixItUp實現(xiàn)動畫過濾和排序
MixItUp過濾排序jQuery插件是一款鼠標滑過圖片顯示描述的jQuery過濾排序插件。是一款輕量,但功能強大的 jQuery 插件,提供了對分類和有序內(nèi)容的美麗的動畫過濾和排序功能。特別適合用于作品集網(wǎng)站,畫廊,圖片博客以及任何的分類或有序內(nèi)容。2015-04-04jQuery 常見操作實現(xiàn)方式和常用函數(shù)方法總結(jié)
一個優(yōu)秀的 JavaScript 框架,一篇 jQuery 常用方法及函數(shù)的文章留存?zhèn)渫?/div> 2011-05-05jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù)
jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù),需要的朋友可以參考下。2011-11-11Jquery EasyUI的添加,修改,刪除,查詢等基本操作介紹
初識Jquery EasyUI看了一些博主用其開發(fā)出來的項目,頁面很炫,感覺功能挺強大,效果也挺不錯,最近一直想系統(tǒng)學習一套前臺控件,于是在網(wǎng)上找了一些參考示例2013-10-10jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個利用 XDomainRequest 對象為 IE8、IE9 實現(xiàn)跨域資源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件2023-06-06Jquery使用Firefox FireBug插件調(diào)試Ajax步驟講解
本文介紹Jquery下的Ajax調(diào)試方法,Jquery Ajax 提供了全功能的 $.ajax() 方法,還有諸如 $.get(),$.getScript(),$.getJSON(),$.post() 和 $().load() 等更為簡便的方法2013-12-12最新評論