touchSwipe手机自动播放触屏幻灯片

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

我们今天继续触的东西,我们基于的脚本还是touchSwipe,这个脚本实在太好用了。我们用它来实现自动播放的幻灯片,当然,你也可以手动切换。

这是我们的代码运行后的结果。。。

这是网易的做法,多了左右控制按钮及文字介绍。。。

这是凤凰网的做法,看来文字介绍还是大公司推荐的啊,这个,也许我们得改进才行。。。

我们写了三个函数,用于实现播放。。。

滚动,我们依然采用CSS3中TRANSLATE这个方法。。。

我们设置的图片显示为4张,因此,当e>3时,我们要让它变为0,这也是实现循环的技巧。。。

当然了,自动播放,就免不了setTimeout。。。

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

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

下载地址:touchSwipe手机自动播放触屏幻灯片.rar

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