jQuery相册插件（开源下载）

一，导言

　　上次 “不定义JQuery插件，不要说会JQuery” 的博客写的肤浅，漏洞百出，而且最重要的是从理论上说如何定义一个jQuery插件，没有实质性的写一个jQuery插件出来，这未免是纸上谈兵。在两周前我就琢磨着写一个什么插件，最后决定写一个jQuery相册插件比较合适，jQuery相册插件虽然在google上一搜，能搜索出成百上千的产品，比如下边列表中谈到的：

　　 60+ Useful jQuery Image Slider Roundup

　　100+ Free jQuery Image Slider Gallery Plugins - Free Download 

　　60+Javascript图片相册脚本

     这些插件我基本上都看过，有些不兼容ie6，有些体积过大，有些要收费，想找出一个能满足自己的，在琳琅满目的插件中不花上一两天功夫的筛选，最后说不定还带上遗憾选择一个不太符合自己的插件。今天我写jQuery插件，绝不是闭门造车，而是为了扫平兼容性强（ie6+,firefox,chrome），插件自身体积小，免费开源的道路。当然最重要的是为了让大家了解如何写出一个jQuery插件。授人以鱼不如授人以渔。

二，准备工作

　　知已知彼，百战不败，我阅读了几款jQuery相册插件的代码，以easySlider为例，其中有些思想非常值得借鉴，并且jQuery用的非常娴熟，但是整个插件也有缺陷，比如vertical：true 时，不支持垂直滚动；如果连续点击prev按钮时，图片出现间断滚动；不能同时支持‘上一张，下一张’和数字导航；此款插件属性多，让新手的上手难度大。针对这些缺陷，我感觉有必要再写一款jQuery相册插件与大家分享。

三，目标

　　1：此款插件应该兼容绝大多数浏览器（包括ie6，twitter的bootstrap都不支持ie6了，但是淘宝，腾讯，网易都还没有放弃ie6，你想进这些公司，所以还是应该考虑ie6）

　　2：不影响使用此插件的网页的其它布局，以及与此页面其它jQuery版本以及js的兼容（在目前市面上的好多插件都做不到这一点）。

　　3：此插件体积小，压缩后的js只有5.6kb。

　　4：支持图片垂直滚动，横向滚动。

　　5：支持图片‘上一张，下一张’导航，数字导航。

　　6：支持图片循环连续滚动。

　　7：可以通过属性设置每张图片切换的间隔时间。

　　8：可以设置图片的滚动速度。

　　9：一个页面可以放置多个jQuery相册插件，并且互不影响。

　　10：每个相册插件可以灵活的设置大小，边框等。

当然这些都不是最重要的，最重要的是我的信念，我的目标是支持开源，不断更新，精益求精，打出国际市场。园子里有朋友愿意给我提供一个服务器空间的，我马上做一个英文网站，把这个插件给挂起来。这个开源插件的名称叫miniSlider。

四：动手实践

 　　虽然这个插件只有12行css代码，200多行js代码，但是每行都经过我仔细的推敲。下边以几个典型案例来说明：

　　1，支持图片循环连续滚动：这是我开发插件遇上的第一个问题。假如一个相册有4张图片需要循环连续播放，我最开始的做法是，找出需要当前显示的那个图片，把图片移动到第一位，这样就造成了图片之间的顺序混乱，后来我用下边这种方法来解决图片循环连续滚动的问题：

 把最后一个图片添加到第一个图片之前，第一个图片添加到最后一个图片之后。这样不管是向前滚动，还是向后滚动，都能支持循环连续滚动。

垂直的情况也如此：

 大家一看图，应该明白支持图片循环连续滚动的端倪了。显而易见，图片的垂直滚动或者说是横向滚动，都没有那么神秘。

2：ie6下的css问题：

a：IE6下浮动后的元素使用负margin被隐藏问题，可以用 _position:relative;属性解决，这儿用了css hack原理。_只支持ie6, *支持ie6,ie7。这些css的hack 我相信一个web开发者都是无比的熟悉。

b：DIV中LI超出宽度不换行解决方法  div(white-space:nowrap;) li(*display:inline;  *float:none; *zoom:1;)  一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似 。

c：ie6下的png图片不透明。做图片相册，“上一张，下一张”按钮，圆点导航按钮都是必不可少的，这些按钮都在悬浮在相册图片之上，为了使其按钮图片不要遮挡相册图片，所以这些按钮图片的背景必须要透明，在其它浏览器上都能很好的实现按钮图片背景透明，但是在ie6浏览器显示的时候就是一件很不愉快的事，必须要借助于其它方法解决ie6下png图片不透明的问题。IE6 PNG透明终极解决方案（打造W3Cfuns-IE6PNG最强帖） 这篇帖子说出了目前能够解决ie6下背景图片不透明的问题，如果仅仅是一个很初级的应用，随便用那种方案都是没问题的，当你有一点点个性化的需求，那就应该仔细考虑要用那种方案了。我在这儿选用的是：DD_belatedPNG_0.0.8a-min.js 这种方案。这种方案我感觉是比较完美的，但是完美中也有缺陷，听我详细道来，我有一个图片圆点的导航功能，就是把当前图片对应在的圆点按钮变为高亮。css代码与js代码对应如下：

.mini-slider .n-ul li a{ margin:0px; padding:0px; display:block;  float:left;  height:20px; width:20px;  background-image:url(images/mini-circlebutton.png);}
.mini-slider .n-ul li .current-a{background-position: 0px 18px;}

//方法1：
$(liObj).find("a").addClass("current-a");
//方法2：
$(liObj).find("a").css({ "background-position": "0px 18px" });

方法一和方法2，在firefox,chrome,ie7+的浏览器都能产生同样的效果，但是在ie6上就折腾了我大半天。当你在这个导航按钮上运用了 DD_belatedPNG.fix("div,a, background") 这行代码后（在ie6上支持png图片透明），在ie6上方法一不可行，方法二可行，我还没有分析具体原因，接下来我会作进一步的原因分析。

五：成果

　　做了那么多的准备工作，对于一个热爱写程序的人，这个时候的心情其实是激动的。请看下图，这个效果是不是很好看。

有时候图片虽然能足够的说明真相，但是对于程序来说好像还差一步，可运行的代码才能说明真相。先推荐再下载