jquery.timers实现带暂停功能的全屏相册

作者:林炜贤来源:www.163css.com发表时间:(2012-09-10)

今天我们要向大家介绍的这个功能来着于“美地行”这家公司,大家可以先欣赏下他们的网站,非常漂亮:“http://www.meidihang.com/”,首先可以肯定美地行这个网站的策划者,水平相当高超,其次,他们的技术实力非常牛。。。

我们看下那个全屏展示的动画,你会不会觉得难度很大?对我来说,只要到了全屏,就是另外一种模式了,而且,它带了上一张下一张及暂停播放按钮,另外,细心的朋友肯定会注意到,上面的三张小图的出现是比文字介绍那一块慢,但消失得早,这样的好处在哪?我的答案是当用户可以看到全屏的大图,如果是同时出现,那就会挡住大图了。。。

我们注意到,有一个“json_gallery.js”,但我把里面的数据都去了,只留一个{},数据还是能出来,想不出这个东西做什么用?也许程序员会告诉我们答案。。。

由于我只放了三张图,因此,我上面的数字最大为3,美地行,将图片设置为18,真是大啊。。。

对于这个震撼力超强的特效,jquery.timers起了重大的作用,我们会注意到那个控制按钮,功能是通过timer.js实现的。。。

这里得提一个注意的地方,由于采用了"$.getJSON",在google,苹果及opera下,会出现数据导不进的问题。。。因此,我们要在HTML的头部这样写:

以下是我制作的效果截图:

好了,代码,大家自己研究,这是一个可以跟FLASH相媲美的动画,以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/09/citypic/index.html

下载地址:jquery_timers实现带暂停功能的全屏相册.zip

返回作者主页:www.163css.com阅读 (6418)
更多 1