转换为语音并朗读全文 00:00 / 00:00

20130816142553

博主在昨天给本站BYMT主题加上了自动切换背景功能,效果还可以,不过需要刷新才能切换,运用的方法是用php随机输出,如果你们需要,也可以拿去用。

将下列代码添加到functions.php里面

function BYMT_rand_bg () {
$randbg = mt_rand(1, 8); /*背景图片随机数*/
$randbgurl = get_bloginfo('template_directory').'/images/background/background'.$randbg.'.jpg'; /*背景图片地址*/
echo'<style>body{background: url('.$randbgurl.') no-repeat top center;background-attachment:fixed;}</style>'."\n";
}
add_action('wp_head', 'BYMT_rand_bg', 100);

下面我介绍一个无刷新自动切换背景的方法,运用的是jQuery的setInterval。

将下列代码添加到主题jQ文件里,或者直接用<script type="text/javascript"></script>包上放在页脚代码里。

//背景自动切换
jQuery(document).ready(function(){
setInterval(function() {
var imgpath = '../wp-content/themes/BYMT/images/background/'; /*背景图片目录*/
var imgrand = Math.floor(Math.random() * 8 + 1); /*背景图片随机数*/
var randurl = '<style>body{background: url(' + imgpath +'background'+ imgrand + '.jpg) no-repeat top center;background-attachment:fixed;}</style>';
$("#randbg").html(randurl);
},10000); /*自动切换时间(毫秒)*/
});

接着在主题<body>后面添加上:

<div id="randbg"></div>

OK,代码就是这样,如果需要手动,你可以加上click判断,点击我查看演示(10秒后自动换背景)

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

当昵称为 QQ 时将自动匹配对应昵称和邮箱
带符号 * 的表示必填项
  1. adia
    adia

    我添加后还是不成功。我的是wp twenthirteen , 该主题有functions。html5.themes-customizer 三个js文件。请教,应该怎么做啊?

    回复
  2. 碎碎念
    碎碎念

    自动切换,小水管受不住,还是刷新即切换比较好

    回复
  3. anopos
    anopos

    这就厉害了。 :smile:

    回复
  4. 木头怀
    木头怀

    好吧,我想用backstretch,但是不会用啊

    回复
    1. 麦田一根葱
      麦田一根葱博主

      backstretch是什么,表示没用过...

      回复
  5. sprit
    sprit

    背景换了吗?我打字很慢,这还是把这些字打完了,我没有看到背景有什么变化啊啊啊啊啊。。。

    回复
    1. 麦田一根葱
      麦田一根葱博主

      小水管亚历山大

      回复
  6. ray
    ray

    :twisted: 等了10秒,背景还没有换。。。以为没有效果呢,后来慢慢出来了,效果不是很好。你可以使用下jquery的Backstretch插件,效果参考http://nju.pt/

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @ray 小水管压力大

      回复
  7. 不给力的面条
    不给力的面条

    我用的是jquery插件

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @不给力的面条 就是感觉插件代码多...

      回复
  8. 梦月酱
    梦月酱

    我悄悄的来占个位子,如果是沙发就赚了,如果不是沙发,那就下次再来下午1:55:33

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @梦月酱 打卡机233

      回复