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

1申—配合Ta ”插件制作幻灯 片效果的流程解析
今天为了做一个模板，来收集幻灯片插件，最终确定了两款比较合适的。
”和.—Bia为此，研究了一下午，从各个方面来实验这两款插 件，究竟哪款比较适合、比较好。
当然，聪明的你看题目就已经知道了。我必须要吐槽一下I 个i 11—
插件。这两款插件，在看官方的I—•时，这个插件的效果要比■”好 一些。看了一下教程，可以自定义的参数较多，貌似功能要更强大一下。于是我 就首先研究了一下这款插件的使用方法。由于网上教程比较少，大部分都是直接 复制的官方教程，我就直接拿官方的I-•代码来看了。这一看，直接晕死。加 载了 r个”•文件，以及各种图片文件，当场晕死。I-•里面的代码，也是很 多很乱，不是怕多、乱的代码，就怕引用的各种文件各种效果的叠加，分析起来 累死个人。
干脆自己按照步骤，自己写个小看一下这款插件的易用性怎么样。按照 官方的步骤，写好了图片链接，加载了需要的1*«^彳文件等。打开一看， 立刻没有了官方I-•的美观和强大，上面的翻页等，都是需要”•定义，这个 暂时没有管理，所以难看就难看吧。图片切换也算正常，不正常的地方就是，在 某个地方，出现了下一张图片的乙大堆图片块。这种切换的原理很简单，生成很 多每个■■用”•中的属性，把整体的图片切成块, 然后对每块进行透明度等的变化J显示的效果就是你看到的那种。但是现在，在 旁边出现了一堆块都是乱的，直接无语。具体什么情况，我已经删了，也不截图 了。估计是某块没有定义好，当我打开官方I-•的时，又怵头了，这 么多，这么乱的代码。功能的强大，必定面临使用的难度提升，估计这个是给专 家级用户使用的，我等小白还是趁早溜走吧。研究了两三个小时，无疾而终。转 身向 —A -slfl ”走去。
先在网上搜索一下相关资料，某前辈已经写出了一个教程，并且自己做了一个 1«1.，下载下来看了下，效果挺好，代码挺少。同时也下载了官方的打 开官方下面的说明，说的清清楚楚的。简而言之就是：加载必备组件=》 你自己写图片链接=》执行那个操作。实事也是如此，可能我之前研究
, 而和它的原理和操作类似，所以我很快就上手并且做
出了自己想要的效果。下面来依次讲解：
L加载必备组件
这个的一个插件，开源项目地址：
144| s 11. /m| aj
当然，离不开1]■一。所以我们要加载三个项目：][■一、和 ■这三个。后面两个就是这个插律包，最后的那个•《« 文件，是用来格式化幻灯片的相关样式。我估计■就是因为缺少了一
个这个，所以才导致的乱，也有可能是我没有发现这个东西。代码如下：
■4” vIjdMl—” ■一”
编写你的图片链接
我们首先需要指定一个带有■的I■标签，这样在第三步执行的时候，插件才 能找到我们想要播出的图片。它的图片的写法，也有几个特点，就是如果你想点 击图片跳转到某链接，在外面加上•标签；在■「标签后面，新建一个标 签，里面的内容，将会作为图片的说明文字出现。直接看代码：
U I一” ■” ►
i m •Brae^l i i m
im•Brae^lM&ime
<，.h>
U Ibme” Illi ►
〈■矿► 〃加载的图片
<.h> 〃图片对应的说响
<，.h>
这个代码的大体框架.是我从官方的【■•中提取出来