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好一些??戳艘幌陆坛蹋梢宰远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è)思路,具體的就要靠你自己去修改了。
- 10個(gè)基于Jquery的幻燈片插件教程
- jQuery 幻燈片插件(帶縮略圖功能)
- 20個(gè)非常棒的 jQuery 幻燈片插件和教程分享
- 8款非常棒的響應(yīng)式j(luò)Query 幻燈片插件推薦
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- jquery圖片輪播插件仿支付寶2013版全屏圖片幻燈片
- jQuery Tools tab(幻燈片)
- 30個(gè)精美的jQuery幻燈片效果插件和教程
- Jquery圖片滾動(dòng)與幻燈片的實(shí)例代碼
- 基于Jquery制作的幻燈片圖集效果打包下載
- 33個(gè)優(yōu)秀的jQuery 教程分享(幻燈片、動(dòng)畫菜單)
相關(guān)文章
jQuery插件MixItUp實(shí)現(xiàn)動(dòng)畫過(guò)濾和排序
MixItUp過(guò)濾排序jQuery插件是一款鼠標(biāo)滑過(guò)圖片顯示描述的jQuery過(guò)濾排序插件。是一款輕量,但功能強(qiáng)大的 jQuery 插件,提供了對(duì)分類和有序內(nèi)容的美麗的動(dòng)畫過(guò)濾和排序功能。特別適合用于作品集網(wǎng)站,畫廊,圖片博客以及任何的分類或有序內(nèi)容。2015-04-04簡(jiǎn)單實(shí)現(xiàn)jquery隔行變色
這篇文章主要為大家詳細(xì)介紹了實(shí)現(xiàn)jquery隔行變色效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11jQuery 常見操作實(shí)現(xiàn)方式和常用函數(shù)方法總結(jié)
一個(gè)優(yōu)秀的 JavaScript 框架,一篇 jQuery 常用方法及函數(shù)的文章留存?zhèn)渫?/div> 2011-05-05jQuery源碼分析-03構(gòu)造jQuery對(duì)象-源碼結(jié)構(gòu)和核心函數(shù)
jQuery源碼分析-03構(gòu)造jQuery對(duì)象-源碼結(jié)構(gòu)和核心函數(shù),需要的朋友可以參考下。2011-11-11Jquery EasyUI的添加,修改,刪除,查詢等基本操作介紹
初識(shí)Jquery EasyUI看了一些博主用其開發(fā)出來(lái)的項(xiàng)目,頁(yè)面很炫,感覺功能挺強(qiáng)大,效果也挺不錯(cuò),最近一直想系統(tǒng)學(xué)習(xí)一套前臺(tái)控件,于是在網(wǎng)上找了一些參考示例2013-10-10jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個(gè)利用 XDomainRequest 對(duì)象為 IE8、IE9 實(shí)現(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() 等更為簡(jiǎn)便的方法2013-12-12jQuery實(shí)現(xiàn)合并表格單元格中相同行操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)合并表格單元格中相同行操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格實(shí)現(xiàn)單元格合并的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jquery實(shí)現(xiàn)簡(jiǎn)單每周輪換的日歷
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單每周輪換的日歷,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09最新評(píng)論