SpryEffect.js实现带暂停功能幻灯片

作者:林炜贤来源:www.163css.com发表时间:(2013-04-18)

今天我们的要作品要提到一个JS框架:SpryEffect.js,我对它也不是很了解,但它可以实现一些类似JQUERY的功能,我们就学习下吧。。。

大家先看下这个地址:“http://blog.163.com/ql2008@126/blog/static/1129725720082246340608/”,我看了之后,才知道原来这是adobe的一个框架,原来adobe在js方面也有进展啊。。。

感觉上,有点像jquery啊,不过,我们今天用它来搞个带暂停功能的幻灯片。

像这样的效果,我们在jq中是不是经常见到,之前我们做过一个挺牛的相册:“jquery.timers实现带暂停功能的全屏相册”,我们看下这个框架的代码吧:

 

在上面的的代码中js_path_img表示播放按钮的路径,这个必须写上,因为它的按钮是采用了图片的方式,还通过area的方式定位,真的很不习惯。。

cantDivs表示显示的图片个数,arrUrl就是你的图片的链接地址,segRotaction表示图片切换的时间。。。最后一个cantDivs>2表示,当达到最后一张时,切换回第一张图片。。。

divNavNoticiaFoto1,我们可以看到,在代码中,都有这样一个ID,通过对ID写不同的样式,实现图片切换,这个使用起来还真有点费劲啊。。

事实上,这种类型的框架,我们只能是学习下,在工作中,jquery使用起来才是最爽的啊。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

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

下载地址:SpryEffect_js实现带暂停功能幻灯片.zip

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