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

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

这是一个创建于 3824 天前的主题,其中的信息可能已经有所发展或是发生改变。

图片4808-用BACKSTRETCH实现定时自动切换背景

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

其他文章:
本文固定链接:https://www.hhtjim.com/with-the-backstretch-implementation-timing-switch-background.html
matrix
本文章由 matrix 于2013年10月09日发布在Wordpress, 兼容并蓄, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:用BACKSTRETCH实现定时自动切换背景-HHTjim'S 部落格
关键字:, ,

有2 条评论 »

  1. xilouqingzhu xilouqingzhu 2013-10-12 11:04:29 +0800#1

    其实不用太频繁,背景每天换下就可以,我想说的是用wordlpress自带的背景功能也可以用这个切换么

    • Matrix Matrix Moderator 2013-10-12 11:09:18 +0800

      这个我不知道 看使用的主题吧

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!