Question

我正在寻找在单页滚动网站的一个部分随机化背景图像的代码。我已经研究过这样做的方法（php / js / html stuff; one ex，second ex），但我无法让它们起作用，因为我不希望图像适用于所有页面/部分，我不希望它在HTML的“正文”中。“请指教！

目前，我使用单个类的backgound-image代码更改CSS中的背景。

Answer 1

这是用于随机化背景图像的PHP代码：

<?php

$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen        
?>

和

<style type="text/css">
.mydiv{
    background: url(images/<?php echo $selectedBg; ?>) no-repeat;
    height:300px;
    width:300px;
}
</style>
<div class="mydiv">

</div>

这是用于随机化背景图像的JavaScript和JQuery解决方案：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
$('.mydiv').css({
    'background-image': 'url(/path/to/images/' + images[Math.floor(Math.random() *      images.length)] + ')'
});
</script>

请参阅此操作（点按左上角的运行以随机化图片）：http://jsfiddle.net/Kf6sb/

Answer 2

您也可以使用javascript / jquery执行此操作。与上面的Justin非常相似，除非它不会被PHP处理，并且不需要在页面css中。

var uri = 'http://example.com';
var img_folder = '/images/';
var img_files = ['bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg'];

function randomBackground()
{
   var random_image = img_files[Math.floor(Math.random()*img_files.length)];
   $('body').css({"background-image":"url("+random_image+")"});
}

//when the page loads
$(document).ready(function()
{
    randomBackground();
});

//an example of changing it on a timer at random
setInterval(function(){randomBackground();}, 300000);

//example of changing it on click
$('#someIDofSomeElement').click(function(){randomBackground();}

值得一提的是这是纯粹的概念，没有经过测试，但在某种程度上，如果不是这个具体应该起作用。但同样，这不是一个固定的方法，无论如上所述，使用PHP的方式，或任何语言来做，也可能有十几种方式我可以想到添加到这个，做不同的，或者做它。

在单页滚动网站的一个部分上创建随机背景

2 个答案: