看到标题你都明白这次又是说啥了,还是JS图片展览的效果,but,这次同时附上 psytopic.com 里面的那个gallery(准确点来说是盗窃回来的),paperen弄来他们的js,css,同时搜索了关于lightory这个信息,准确点来说是个开发者(根据css文件开头的备注找到了这个线索),paperen当然也不确定是不是这个lightory(t.sina.com.cn/lightory),但可以肯定而且令我惊讶的是微博这位又是一个90后的杰出开发者(又让paperen觉得中国的IT未来一片光明,我们需要的只是创新而已),访问了 他的blog 与摆摆书架(http://bookfor.us/)paperen喜欢这样的UI,摆摆书架的玩法大家也可以了解下,挺有意思的。

多余的东西就到此为止了,说得有点多了……好吧,一开始就来个DEMO给大家看看(psytopic.com的那个)。

20110326212041

DEMO is here

这就是原版本的效果,觉得有些单调?可以访问,但老实说paperen就是喜欢这种简约的风格,paperen不倾向于那种华丽的色彩浓重的风格,大家不妨可以去psytopic的主站看看这个gallery与整个布局配合的效果,真的给人一种很舒服的感觉。因为并没有询问过psy网站就将它这个gallery拿下来,所以大家千万不要用浏览器查看这个demo的 style.css 文件与 script.js 文件啊~~~更不要将他们复制下来啊~~记住了,不要……

先不说代码是如何实现的,因为代码不是重要的,设计思想才是重要的。

总体上说,它这个是将所有的html结构都放出来的,就是说第一个图片展示与第二个,第三个的html结构都是一开始放出来的,只是使用了css对不“高亮”,不是当前的那些进行了隐藏。具体可以查看hilighted与displayNone这两个css,那么事情就变简单了,定时器执行一个操作:将下一个画廊主体的class去掉displayNone并加上hilighted,将现在是hilighted的画廊主体去掉其hilighted加上displayNone,ok!就是这么简单。so do it!

function slideForward() {
var a = $(".hilighted").attr("id");
if (a) {
var b = new Array();
b = a.split("_");
if (b[1] == panelTotal) {
$(".hilighted").removeClass("hilighted").addClass("displayNone");
$("#div_1").removeClass("displayNone").addClass("hilighted")
} else {
$(".hilighted").removeClass("hilighted").addClass("displayNone").next("li").removeClass("displayNone").addClass("hilighted")
}
}
};

slideForward函数,正如paperen上面说的思路,你可以分析一下这里的意思了。

step1:获取当前“高亮”的画廊ID
step2:判断是否到达上限了
step3:
如果是到达上限了,第一个画廊被高亮,去除当前画廊主体的高亮并加上displayNone。
如果没到达上限则下一个画廊主体则去除displayNone并加上高亮,当前高亮的去掉高亮并加上displayNone

这里需要了解的是使用了画廊主题的ID来获取当前展示到第几个,div_1,div_2,div_3……用下划线来分割1,2,3……就能知道当前哪个高亮了,还有使用next,指代到一下个画廊主体,真的很简练。

至于那些翻页,暂停,播放的功能就更容易明白了。

$(".turnleft").click(function () {
var a = $(".hilighted").attr("id");
var b = new Array();
b = a.split("_");
if (b[1] == 1) {
$(".hilighted").removeClass("hilighted").addClass("displayNone");
$("#div_" + panelTotal).removeClass("displayNone").addClass("hilighted")
} else {
$(".hilighted").removeClass("hilighted").addClass("displayNone").prev("li").removeClass("displayNone").addClass("hilighted")
}
});
$(".turnright").click(function () {
slideForward()
});
$(".player").click(function () {
if ($(this).hasClass("stop")) {
clearTimeout(timer);
$(".stop").removeClass("stop").addClass("play");
$("em").html("play")
} else {
setTimeout("slideFeature()", interval);
$(".play").removeClass("play").addClass("stop");
$("em").html("stop")
}
});

这里要解析一下的是当目前player元素的class是stop时,则代表要停止自动播放功能,在代码上就是使用clearTimeout对定时器的ID,这里就是timer这个全局变量,相反是播放时重新设置定时器好了。原来的代码计时是写死了的,也就是说写固定了setTimeout("slideFeature()", 10000);paperen则将它抽出来放到一个全局变量里面,那么需要加长间隔或缩短间隔只需要修改interval这个变量即可。

而paperen也按照这种风格做了一个,跟它这个不同的是paperen一开始没有将所有画廊都输出到html中,而是调用js将相应数据装载到html结构里面。

20110326212113

DEMO is here!

所有代码都可以自己查看源代码获得,paperen想你应该知道什么意思的。

主要是调用到my_gallery这个函数,而gallery_action只是作为那些API(翻页,暂停,播放)的一个“驱动”程序或者可以这样形容吧,paperen这个的缺点可能是体现在预载上,因为在网速慢的情况下出现的情况是跳到下一张时图片仍在加载,并不会预先将所有图片加载好,在第一轮加载完毕之后就顺畅了。而好处是html结构倒是没那么长了~~你当然可以发挥你的想象力或者自己动手弄一个属于你自己的版本吧,其实代码的事情并没有你想象中那么难,try it and do it,you will make it!

哦~~当然上面所有代码都是基于jquery驱动的。