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

Question

我正在寻找代码来随机化单页滚动网站的一部分上的背景图像。我已经研究了这样做的方法（php/js/html 的东西；一个 ex，第二个 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 来执行此操作。与上面贾斯汀的非常相似，只是它不会由 PHP 处理，也不需要 in page 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 的方法，或者任何语言来做到这一点，我也可能想到十几种方法来添加它，以不同的方式做，或者做它。