全部的我正在开发一个Wordpress主题,我需要在主页上显示一个随机的背景图像,每个图像都有特定的文本。
我已经安装了后台管理器插件(http://wordpress.org/plugins/background-manager/), 但它只支持在图像集上显示覆盖,我看不到一种简单的自定义方法。
作为替代,我找到了这篇网站文章(http://wpdevsnippets.com/full-page-screen-background-image-slideshow-easy/), 它包含一个显示随机背景图像的基本脚本。我能想象的使其适用于该网站的唯一方法是在Wordpress中为背景图像添加自定义内容类型,然后允许为这些内容项添加特色图像和摘录。
我迷茫的是如何从模板页面(循环之外)调用这些图像,然后在页面内容中,从随机选择的图像调用标题或标题。
下面是来自另一个站点示例的所有代码。任何帮助或指示都将是巨大的帮助。
HTML:
<div id="full-bg">
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg1.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg2.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg3.jpg" />
<img class="full-bg" src="http://wpdevsnippets.com/snippets-media/bg/hires-bg4.jpg" />
</div>
CSS:html, body {
height: 100%;
}
#full-bg img {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:-10;
opacity: .9;
}
Javascript:<script type="text/javascript">
jQuery(document).ready(function($) {
/* random ordering of images */
var $fullBGs = $("#full-bg img"),
$copies = $fullBGs.clone(true);
[].sort.call($copies, function() { return Math.random() - 0.5; });
$copies.each(function(i){
$fullBGs.eq(i).replaceWith(this);
});
setInterval(function(){
$(\'#full-bg img.active\').animate({opacity:0},500, function(){
$(this).removeClass(\'active\');
})
if($(\'#full-bg img.active\').next().length>0)
$(\'#full-bg img.active\').next().animate({opacity:1},500).addClass(\'active\');
else
$(\'#full-bg img:first\').animate({opacity:1},500).addClass(\'active\');
} ,4000);
$(\'#full-bg img:first\').animate({opacity:1},400).addClass(\'active\');
});
</script>