0

を使用して背景画像を変更しようとしています

Math.floor((Math.random());

HTMLファイル内で呼び出されるCSSファイルの行の1つは次のとおりです。

.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 ページが生成されました。上記の方法を使用して、4 つの個別の CSS ファイルを作成せずにこれを実行しようとしています。

4

3 に答える 3

1

Jquery を試す [素晴らしい] fiddleでデモ LIVE を取る

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 に答える