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



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