0

我有一个带有背景图像的元素，是否可以将该背景图像更改为我拥有的随机图像 URL？

因此，当用户加载页面时，将显示随机背景图像。

更新

感谢所有回答我问题的人，你们都很棒！

4

6 回答 6

2

是的。这是一个例子：

$(document).ready(function() {
    $("body").css("background-image", "url("+your_random_image_url+")");
});
于 2012-05-19T11:00:21.827 回答
1

将图像文件命名为“image1.jpg”“image2.jpg”等等。生成一个随机数

Math.floor(Math.random()*range_of_your_image_nums+1);

然后使用此数字将您的随机图像加载为

$("#id_of_your_element").css("background","<url>");
于 2012-05-19T11:02:15.400 回答
1

这是执行此操作的示例脚本，以下是我执行此操作的方式。使用 IE 6 和 Firefox（2 和 3）测试。背景图像固定在正确的站点上，不会滚动。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<style type="text/css">
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}
</style>
</head>
<body class="bg">
<p>Some text</p>
<!-- put a lot text lines here to see that the background stays fixed. -->
<p>Some text</p>
</body>
</html>
于 2012-05-19T11:03:44.327 回答
1

保留一个包含所有背景的数组，并在$(document).ready()

$(document).ready(function() {
    var backgrounds = ['link1', ..., 'linkN'];
    $("#yourElementId").css("background-image: url("+backgrounds[Math.round(Math.random() * (backgrounds.length - 1))] +")");
});
于 2012-05-19T11:04:20.957 回答
1 
var backgrounds = ['',
                   'bg3.jpg',
                   'bg1.jpg',
                   'bg1013.jpg',
                   'bg123.gif',
                   'bg553.jpg',
                   'bg663.png',
                   'bgdaas3.jpg',
                   'bgdw3.jpg',
                   'bgdd3.jpg',
                   'dasd.png'
                  ];

$('#elementID').css('background', 'url('+backgrounds[Math.random()*10]+')');
于 2012-05-19T11:06:05.957 回答
1 
$(document).ready(function() {
    var images = ["the-nude-art.jpg", "the-secret-pic.jpg","topless-pic.png","oolala-pic.jpg"]; 
    var rand_image = images[Math.floor(Math.random() * images.length)];
    var my_site_image_folder_path  = 'http://www.xyz.com/images/';
    $('body').css('background-image', 'url("' + my_site_image_folder_path + rand_image + '")');
});
于 2012-05-19T11:21:09.227 回答