Question

我正在尝试使用

更改背景图像

Math.floor（（的Math.random（））;

在我的HTML文件中调用的CSS文件中的一行是：

.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img.png) no-repeat 0 0;}

我要做的是使用以下语句从1到4获取一个随机数，并根据随机检索的数字显示不同的背景图像。所以我决定从CSS文件中删除上面的行，并在我的HTML文件中添加以下代码：

var randomNumber = Math.floor((Math.random()*4)+1); // random number (no more than 4 or the array will be out of bounds)
if (randomNumber == 1) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img.png) no-repeat 0 0;}</style>');
}
if (randomNumber == 2) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img2.png) no-repeat 0 0;}</style>');
}
if (randomNumber == 3) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img3.png) no-repeat 0 0;}</style>');
}
if (randomNumber == 4) {
    document.write ('<style>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img4.png) no-repeat 0 0;}</style>');
}

这产生了一个空白的HTML页面。我试图使用上述方法创建四个单独的CSS文件。

Answer 1

document.write将替换当前内容。您正在撰写的页面。

使用：document.getElementsByClassName('slider')遍历元素并使用element.style.backgroundImage=...

设置背景图片

Answer 2

由于唯一改变的是背景图像，我只是使用javascript来应用该样式。像

这样的东西

var randomNumber = Math.floor((Math.random()*4)+1),
    sliders = document.getElementsByClassName('slider');

Array.prototype.forEach.call(sliders, function (elm) {
  elm.style.background = 'url(images/slide-img' + randomNumber + '.png)';
});

尚未经过测试

Answer 3

试试Jquery [太棒了] 在fiddle

中进行演示

HTML：

<div class="slider"></div>

的CSS：

.slider {
    width: 300px;
    height: 300px;
    -webkit-background-size:100% 100%;
    -moz-background-size:100% 100%;
    background-repeat:no-repeat;
    border: 2px black solid;
}

的javascrip：

$(function () {
    var url = "http://maispc.com/samuel/content/images/",
        imgArray = [url+"avatar.png",
                   url+"provider/blogger.png",
                   url+"provider/LinkedIn-32x32.png",
                   url+"provider/myspace.png",
                   url+"provider/instagram.png",
                   url+"provider/Twitter-32x32.png",
                   url+"provider/stackoverflow.png",
                   url+"provider/Facebook-32x32.png"],
        randomNumber = Math.floor((Math.random() * imgArray.length)),
        baseUrl = "url('" + imgArray[randomNumber] + "')";

    $(".slider").css('background-image', baseUrl); })();

在fiddle

中进行演示

使用Math.Random（）修改CSS文件;

3 个答案: