此篇文章是根据万戈的《原生 Javascript 版自动化焦点图 》加工而来,别看名字这么复杂,其实说白了就是图片幻灯片式自动播放,他做的这个有几个特点:

  1. 原生的JavaScript,没有依赖JS库啊、JQ库啊。(其实如果放在WP主题中的话,主题基本都已经链接JS库了)
  2. 全自动播放图片,自定义换图片的时间,无需点击即可更换图片。
  3. 代码简单方便。
  4. 无需必须设置长宽。
  5. 更改图片需手动更改代码,更改链接需手动更改代码。

效果图(只是截图而已,看动态,请看官方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