用BACKSTRETCH实现定时自动切换背景
作者：matrix 被围观: 2,616 次 发布时间：2013-10-09 分类：Wordpress 兼容并蓄 零零星星 | 2 条评论 »
这是一个创建于 3249 天前的主题，其中的信息可能已经有所发展或是发生改变。
jquery-backstretch可以实现之前>>刷新页面后让WordPress背景随机切换 不能到达的动态切换背景功能。 用jquery-backstretch就算你不按F5刷新页面背景也可以自动切换，带有淡入淡出的缓慢加载那种效果，很好看。
github地址：https://github.com/srobbin/jquery-backstretch
官网：http://srobbin.com/jquery-plugins/backstretch/
目前最新版本 Backstretch - v2.0.4 - 2013-06-19
我这使用的是较早的版本1.2.5，没有问题。建议使用官方最新版本。
jq-BACKSTRETCH库下载：
v1.2.5： 2kb左右
http://www.400gb.com/file/28925141
http://pan.baidu.com/share/link?shareid=783264445&uk=3238236832
v2.0.4：5kb左右
http://www.400gb.com/file/28925143
http://pan.baidu.com/share/link?shareid=786083554&uk=3238236832
步骤：
一.在主题header.php的适当位置载入jquery库，1.7.2和1.8.3版本的都可以，其余版本的不清楚。某些主题jquery库已经载入了，不需要重复载入。
google的：//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
百度的：http://libs.baidu.com/jquery/1.8.3/jquery.[js](https://www.hhtjim.com/tag/js)
二.在主题header.php的适当位置载入BACKSTRETCH的js文件。建议使用官方最新版本v2.0.4。
例如：
代码语言：javascript复制<script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery.backstretch.min.js"></script> 说明：<?php bloginfo('stylesheet_directory');?>是当前主题路径。当然jquery.backstretch.min.js需要放到主题内的js目录。
三.header中添加js代码：
代码语言：javascript复制<script>
var images = [
"http://127.0.0.1/wordpress/wp-content/themes/wp_typecho/bg/1.jpg",
"http://127.0.0.1/wordpress/wp-content/themes/wp_typecho/bg/2.jpg"
];
$(images).each(function(){
$('<img/>')[0].src = this;
});
var index = 0;
$.backstretch(images[index], {speed: 3000});//速度默认500ms
setInterval(function() {
index = (index >= images.length - 1) ? 0 : index 1;
$.backstretch(images[index]);
}, 10000); //变换间隔5秒=5000毫秒
</script> 说明：第3、4行的图片路径就是你准备切换图片的地址，可以是相对地址也可以是像上面那样的绝对地址。
第10行的3000为切换图片的过度速度单位毫秒。时间单位1秒=1000毫秒
第14行的10000为图片定时切换的倒计时。这里就是10秒后切换到下一张图片。
四.如果没遇见大问题这样也就可以算成功了。
由于我之前在NGRO主题中添加了>>wordpress中ZeroClipboard实现js flash跨浏览器剪切板复制粘贴 的功能。造成上面第三步骤的代码和复制粘贴的js代码冲突，技术有限没办法这个东东，坐等高手。希望都能保留，若实在不行，也就把那flash复制功能丢了。
复制粘贴的js代码：
代码语言：javascript复制 <script type="text/javascript">
var clip = null;
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText($('text').value);
clip.glue('anniu');
clip.addEventListener( "complete", function(){
alert("复制成功！");
});
clip.addEventListener( "load", function(client) {
client.movie.title="复制本文固定链接";
});
}
</script>参考：http://support.sartweb.com/?p=1312
