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上方法一不可行，方法二可行，我尚未分析具体缘由，接下来我会做进一步的缘由分析。

五：成果

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

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