0

我正在尝试使用更改背景图像

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 文件的情况下做到这一点。

4

3 回答 3

3

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

使用：document.getElementsByClassName('slider')遍历元素并使用设置背景图像element.style.backgroundImage=...

于 2013-06-06T21:35:36.180 回答
1

由于唯一改变的是背景图像，我只需使用 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)';
});
  • 这还没有经过测试
于 2013-06-06T21:39:30.580 回答
1

尝试 Jquery [fantastic] 在小提琴中进行演示

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;
}

Java脚本：

$(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); })();

在小提琴中进行演示

于 2013-06-06T22:17:06.553 回答