用BACKSTRETCH实现定时自动切换背景

作者：matrix 被围观: 3,427 次 发布时间：2013-10-09 分类：Wordpress 兼容并蓄 零零星星 | 2 条评论 »

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

二.在主题header.php的适当位置载入BACKSTRETCH的js文件。建议使用官方最新版本v2.0.4。

例如：

<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代码：

<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代码：

   <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