バックグラウンドイメージ全体のWebページをカバーし、応答性があり、またランダムに選択されます。

ブラウザで反応しますがゆがんでいないように、CSSのカバープロパティを使用する背景イメージを持つページを作成しようとしていますが、 jQueryの配列からランダムに選択されます。バックグラウンドイメージ全体のWebページをカバーし、応答性があり、またランダムに選択されます。

これは私が現時点で行っている唯一の事柄であり、私は遊んでいたが、私はjQueryをあまり扱っていないので、実際には分かっていない私がやっていること！どんな助けにも感謝！

HTML：

<head> 
    <title>Test</title> 
    <link href="css/css.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="javascript/jquery.js"></script> 
</head> 
<body> 
    <div id="background"> 
    </div> 
</body>

CSS：

body { 
    margin: 0; 
} 

#background { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-image: url(backgroundImage) 
} 

html, body { 
    overflow: none !important; 
    overflow-x: none !important; 
    overflow-y: none !important; 
}

のjQuery：

var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ]; 

var myNumber = Math.floor(Math.random() * 5); 

$(document).ready(function() { 
    $("background-image").attr('url', picArr[myNumber]); 
});

出典

2016-12-17 BenRichi_

あなたがそれをランダム化したい場合は、（setTimeoutメソッドを使用します）。また

、 "背景" のdivに背景画像を変更するには、単に以下のようにjqueryのセレクタを.CSS。

例えば

var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ]; 

$(document).ready(function() { 
    setTimeout(function(){ 
    var myNumber = Math.floor(Math.random() * 5) + 1; 

    $("#background").css('background-image', 'url('+picArr[myNumber]+')'); //here 
    }, 3000); // ms of how often you want it to change. 
});

出典

2016-12-17 23:39:58

ありがとう、私はこれを使用しましたが、タイムアウトを削除しました。なぜなら、リフレッシュ時に異なるものをロードするだけだからです。ご協力ありがとうございました！ –

あなたは、セレクタ$("background-image")をmisstypeなかったではない、これが可能になっている$("#background")

var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ]; 
 

 
var myNumber = Math.floor(Math.random() * 5); 
 

 
$(document).ready(function() { 
 
    $("#background").attr('url', picArr[myNumber]); //here 
 
});

#background { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-image: url(backgroundImage) 
 
}

<link href="css/css.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="javascript/jquery.js"></script> 
 
<div id="background"> 
 
</div>

出典

2016-12-17 23:35:20 Device

私はこれを行う場合であっても、何もスニペットを実行すると、または私が私のWebページをロードする場合に発生します –

私は、これはすでに今回答されているが、これは私の解決策だったと思います：

var picArr = ['http://lorempixel.com/output/fashion-q-c-640-480-1.jpg', 'http://lorempixel.com/output/animals-q-c-640-480-4.jpg', 'http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg']; 

var l = picArr.length; 

var myNumber = Math.floor(Math.random() * l); 

console.log(myNumber); 

$(document).ready(function() { 
    $("#background").attr('style', 'background: url(' + picArr[myNumber]) + ')'; 
});

CSS：

html, body { 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
}

出典

2016-12-17 23:52:07

バックグラウンドイメージ全体のWebページをカバーし、応答性があり、またランダムに選択されます。

答えて

関連する問題