jquery配合coin-slider插件制作幻灯片效果的流程解析_jquery

《jquery配合coin-slider插件制作幻灯片效果的流程解析_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、i中粋配合mA-slflg插件制作幻灯片效果的流程解析今天为了做一个模板，來收集幻灯片插件，最终确定了两款比较合适的。••A-slf和A为此，研究了一下午，从各个方而来实验这两款插件，究竟哪款比较适合、比较好。当然，聪明的你看题目就已经知道了。我必须要吐榊一下■左417^个插件。这两款插件，在看官方的le■•吋，这个插件的效果要比皿亠皿好一些。看了一下教程，可以自定义的参数较多，貌似功能要更强犬一下。于是我就首先研究了一卜•这款插件的使用方法。由于网上教程比较少，大部分都是直接复制的官方教程，我就直接拿官

2、方的•代码来看了。这一看，直接晕死。加载了/个文件，以及各种图片文件，当场晕死。•里面的代码，也是很多很乱，不是怕多、乱的代码，就怕引用的各种文件各种效果的叠加，分析起来累死个人。干脆口己按照步骤，口己写个小看一卜•这款插件的易用性怎么样。按照官方的步骤，写好了图片链接，加载了需要的文件等。打开一看，立刻没有了官方•的美观和强大，上面的翻页等，都是需要定义，这个暂吋没有管理，所以难看就难看吧。图片切换也算正常，不正常的地方就是，在某个地方，岀现了下一-张图片的=大堆图片块。这种切换的原理很简单，生成很多I

3、亠每个1亠用•《中的屈性，把整体的图片切成块,然后对每块进行透明度等的变化丿显示的效呆就是你看到的那种。但是现在，在旁边出现了一堆块都是乱的，直接无语。具休什么情况，我己经删了，也不截图了。佔计是某块没有定义好，当我打开官方•的吋，又怵头了，这么多，这么乱的代码。功能的强大，必定面临使用的难度提升，估计这个是给专家级用户使用的，我等小白还是趁早溜走吧。研究了两三个小时，无疾而终。转身向-all走去。先在网上搜索一下和关资料，某前辈已经写出了一个教程，并且口己做了一个下载下来看了下，效果挺好，代码挺少。同时

4、也下载了官方的打开官方I*.,下面的说明，说的清清楚楚的。简而言之就是：加载必备组件二》你自己写图片链接二》执行那个操作。实事也是如此，可能我之前研究FriwsllM.而和它的原理和操作类似，所以我很快就上手并且做出了口己想要的效果。下面來依次讲解：加载必备组件这个是的一个插件，开源项目地址：RswI•mi/f^

5、ri

6、ej"slfl•&当然，离不开"Ipe^1所以我们要加载三个项目：斗.吟（、mA-sdriimA"slfl•obs4/i1»s.ess这三个。后面两个就是这个插任包，最后的那个ess他“士

7、Phme”如丿”“"ess”/>8■忙”•★”H/SW^1*8■忙”MA-sllK.lA.-js"H/s^

8、*文件，是用来格式化幻灯片的相关样式。我估计就是因为缺少了一个这个，所以才导致的乱，也有可能是我没有发现这个东西。代码如下：a编写你的图片链接我们首先需要指定一个带有■的13标签，这样在第三步执行的时候，插件才能找到我们想要播出的图片。它的图片的写法，也有几个特点，就是如杲你想点击图片跳转到某链接，在外而加上由标签；在标签后而，新建一个8

9、“标签，里面的内容，将会作为图片的说明文字出现。直接看代码：

10、4.^■牛►u"me"iih"►4十壬s■•二'riiT«s/q・.q］丁►//加载的图片〃图片对应的说明"s

11、44/IM这个代码的大体框架■是我从官方的I■•中提取出-來的•这里我乂要吐槽一下了.官方的•文件■写的实在是太不规范了，■■■标签都用的是大写，而且从上面的少/的s■•就可以看出來，他们竟然用了单引号！•》文件里也是这样，患有代码强迫症的潜行者・，花了好几分钟，0把大部分代码变成小写，添加合适的换号，真无语。看了一下开发时间，2•■年的作品，那时候应该普及了，为什么还用大写的写法，无语了。6执

12、行操作确保上而两个步骤完成Z后，就需要触发它的方法，来实现幻灯片的功能了。方法当然是J«>•7,jXfe"O

13、合3,那样可以确保幻灯片图片被完全下载下来之后，再出现幻灯片。很显然，还可以配置很多参数，让幻灯片的功能更加强大。在上面的代码中，我添加了一个参数341,因为我的照片高度是241

14、7。下而介绍一下其他参数，我在官方注释后面，小小的翻译了一下，不准确的话，还望见谅。:M//餐・幻灯片的宽度■^4://幻灯片的高度S

15、弋Q//S

16、d4

17、S幻灯片切岀小方框的宽度时：鼻//S

18、d4S幻灯片切出小方框的高度

19、4护：3H®,〃

20、4护riiTMriiis切换图片的吋间，毫秒单位3t,//s

21、・*»sAis小方框变化的时间，毫秒单位（这两个尽量不要改，官方说改了容易出现过度问题）•1*,$■久//F*,*

22、Ml:SH.//S

23、"l呻！■“••■18标题消失的速度，毫秒单位mhbHx=〃亠订孔“far变换样式，随机，漩