此篇文章是根据万戈的《原生 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

/*判断是否是首页，只在首页显示，可自行设置*/
<?php if ( is_home() ){ ?>
/*把slide.js文件链接进主题*/
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slide.js"></script>
/*相关设置*/
<script type="text/javascript">
		window.onload = function() {
			slide.init({
				width: 550,				//图片宽度，非必须，默认值自适应
				height: 220,			// 图片高度，非必须，默认值自适应
				auto: true,				// 是否自动播放，非必须，默认值 false
				interval: 4000,			// 自动播放的更换时间，非必须，默认值 3000，当 auto 为 true 时有效
				targetId: 'slide',		// 目标DIV的ID，必须
				data: [					// 各个图片设置，必须
					{
						src: '<?php bloginfo('template_directory'); ?>/images/lead/img.png',//图片地址
						title: '图片一',//图片标题，
						url: 'http://laycher.com'//图片链接到地址
					},
					{
						src: '<?php bloginfo('template_directory'); ?>/images/lead/img1.jpg',
						title: '',
						url: ''
					},
					{
						src: '<?php bloginfo('template_directory'); ?>/images/lead/img2.jpg',
						title: '',
						url: ''
					}
				]
			});
		}
	</script>
<?php } ?>

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



无觅相关文章插件，快速提升流量