此篇文章是根据万戈的《原生 Javascript 版自动化焦点图 》加工而来,别看名字这么复杂,其实说白了就是图片幻灯片式自动播放,他做的这个有几个特点:
- 原生的JavaScript,没有依赖JS库啊、JQ库啊。(其实如果放在WP主题中的话,主题基本都已经链接JS库了)
- 全自动播放图片,自定义换图片的时间,无需点击即可更换图片。
- 代码简单方便。
- 无需必须设置长宽。
- 更改图片需手动更改代码,更改链接需手动更改代码。
效果图(只是截图而已,看动态,请看官方Demo):
鉴于代码简洁,换图片、换链接都需要改代码,所以不适宜用在主题制作中做导航用,Laycher我只是用它来做首页图片展示,相当于Banner,加在wonk这个主题上,因为觉得这个主题过于简洁了。但我觉得这个可以改造一下,弄成一个WP插件或者主题设置中修改也不错。
使用方法:
1.下载js文件,点此下载。
2.放在使用主题的js文件夹中。
3.编辑主题header.php文件中的header部分,使主题调用这个js文件,并在此文件中设置相关参数。
具体:在<header></header>中添加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /*判断是否是首页,只在首页显示,可自行设置*/ if ( is_home() ){ ?> /*把slide.js文件链接进主题*/ /*相关设置*/ } ?> |
4.设置好之后,在你需要的地方,加入如下代码即可。我放在了index.php,即首页的头部。id必须与上面设置的一致!
<div id="slide"></div>
这样就OK了。另外,将js文件上传到空间前,最好压缩一下再上传,这样体积会很小,我的只有3.8KB。在线压缩js.clicki.cn。如果想去掉链接功能,只是单纯的图片展示的话,请修改slide.js文件。
更多功能,更多改造请自行研究,有好的东西可别忘了我哦。哇咔咔。
>> 若为原创,转载请注明: 转载自Laycher's Blog
>> 本文链接地址: 给WordPress增加幻灯片式图片
>> 订阅本站: http://feed.feedsky.com/laycher
幻灯图片的切换方式不好修改····
确实不好修改,淡入淡出。
为什么你的回复会进入我的垃圾邮件当中?
这个我就不知道了。哇咔咔。
很好,我用的个插件
效果不错~
在wordpress加入幻灯片式图片效果不错,终于被我修改的可以显示了,但页面每次刷新时,此幻灯图片加载的很慢是为什么?给指点下
1.你网速比较慢,2.图片较大,加载慢。3.你放图片的空间加载慢。4.第一次完全显示后,会在本地保存缓存文件,下次看会很快。
你可以放在自己本地测试一下先,看看速度怎么样。
你好,网站用了您的代码 提示 init 对象不支持对象或方法 怎么解决啊
有没有把那几个js文件放上去呢?
有啊,在本机上是可以的 其他电脑上就不行了 IE提示 init对象不支持对象或方法
用了一下,感觉不错,不过图片的加载似乎有点慢,布置LZ有何建议或者方法改善没?谢谢啊!赞一个
太棒了~~我试了好多办法,好多插件,
就这个是我最满意的,感谢楼主,以后我会常来溜达~~~