2

はじめに、こちらのページです。

Javascript コードを試してみましたが成功しなかったので、現在の設定について説明します。

私の体は #homepage の ID を持っています。これは、このコードが必要な唯一のページであるため、その ID を割り当てました。以下は、画像にアクセスしてページをカバーする CSS です。

body#homepage {
    background-attachment: fixed;
    background-image: url(../images/bg/4.jpg);
    background-repeat: no-repeat;
    background-position: center bottom; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

「../images/bg」フォルダーには、1 から 4 までの番号が付けられた 4 つの画像があります。ページの読み込み時に画像を 4 の間で変更したいだけですが、現在の CSS と同じように画像のスタイルを維持する必要があります。 .

私はJavascriptに漠然としか慣れていないので、Javascriptで非常に単純な問題を抱えていると思います. 誰かが私のためにこれを具体的に詳しく説明してくれれば幸いです。本当にありがとう！

4

4 に答える 4

2

これを試して

var randomImage = Math.floor((Math.random()*4)+1);
var homePage = document.getElementById('homepage');

homePage.style.backgroundImage='url("..\/images\/bg\/'+randomImage+'.jpg")';
于 2013-10-28T18:11:03.673 に答える
0

document.getElementById('homepage').style.backgroundImage = 'url(/whatever/img' + Math.floor( Math.random()*4 ) + '.png)';

于 2013-10-28T18:15:38.003 に答える
0

まず、1 から 4 までの乱数を取得する必要があります。

純粋な JavaScript と jQuery でそれを行う方法を紹介します。

JavaSript の方法:

//get random number from 1 to 4 and assign '.jpg' - or other format you need
var randomImage = "..\/images\/bg\/" + Math.floor((Math.random()*4)+1) + '.jpg';

//get body by ID
var homePageBody = document.getElementById('homepage');

//asign random image to body
homePageBody.style.backgroundImage=randomImage;

jQuery の方法:

$(document).ready(function () {
    var randomImage = '../images/bg/' + randomFromTo(1, 4) + '.jpg';

    //set background to body #homepage
    $('#homepage').css("background-image", randomImage)
});

//define randomizer function
function randomFromTo(rfrom, rto) {
    return Math.random() * (rfrom - rto) + rfrom;
}
于 2013-10-28T18:26:17.383 に答える
0

Jqueryで

$(document).ready(function(){
var num = getRandomArbitrary(1,4);
$('#homepage').css("background-image",'../images/bg/' + num + '.jpg')
});

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
于 2013-10-28T18:12:13.543 に答える