jQueryを使用して画像の背景をランダムに設定します。

Question

ページ全体をカバーするフルイメージを表示するCSSがあります。

#backgroundjake { 
    display: block; 
    margin: 0; 
    background: #fff fixed; 
    background-position: top right; 
    /*background-position: contain;*/ 
    background-size: cover; 
    position: relative; 
    z-index: 5; 
    top: 0; 
    background-repeat: no-repeat; 
    background-image: url("images/bb7.jpg"); 
} 

私はjQueryをしばらく理解しようとしていますが、これらのスクリプトでは結果が得られません。

私はHTMLでこのようなCSSクラスを呼び出す

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > 

var images = new Array('images/bb1.jpg', 'images/bb2.jpg', 'images/bb3.jpg', 'images/bb4.jpg', 'images/bb5.jpg', 'images/bb6.jpg', 'images/bb7.jpg',  'images/bb8.jpg'); 
    var num = Math.ceil(Math.random() * totalCount); 
$("#backgroundjake")).css('backgroundImage', 'url(' +images[num]+ ')'); 

</script> 

：

<div id= "backgroundjake" name= "backgroundjake" > 

Answer 1

はここにあなたの問題の解決策をJSFiddleです：

EDIT：私はfloor()機能を使用する代わりにceil()私はランダムのバグに気づきました。

See this fiddle

JSコード：あなたのコードについて

$(document).ready(function(){ 
    var images = new Array('http://lorempicsum.com/futurama/627/300/4', 'http://lorempicsum.com/futurama/350/200/6','http://lorempicsum.com/futurama/255/200/5'); 
    var num = Math.floor(Math.random() * images.length); 
    $("#backgroundjake").css('backgroundImage', 'url(' +images[num]+ ')'); 

    $("h2").click(function(){ 
     $(this).css('textShadow','#6374AB 4px 4px 4px'); 
    }); 
}); 

、あなたはVARSを呼び出し、それらをテストするときは注意してください。たとえば、コードで定義されていなくても "totalCount" varを呼び出しても機能しません。

Answer 2

JavaScript random()乱数を返すには、メソッドを使用する必要があります。ここ

もっとに関する情報： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

$(document).ready(function() { 
 
    var array_images = new Array('http://placehold.it/350x150/000000', 'http://placehold.it/350x150/e63c3c', 'http://placehold.it/350x150/3ce690'); 
 

 
    var num = Math.floor(Math.random() * array_images.length); 
 

 
    $("#backgroundjake").css('background-image', 'url(' + array_images[num] + ')'); 
 

 

 
});

html, 
 
body { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
#backgroundjake { 
 
    display: block; 
 
    margin: 0; 
 
    background: #fff fixed; 
 
    background-position: top right; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    position: relative; 
 
    z-index: 5; 
 
    top: 0; 
 
    background-repeat: no-repeat; 
 
    background-image: url("http://placehold.it/350x150/e63c3c"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="backgroundjake"> 
 
    <h2> 
 
    lorem ipsum 
 
    </h2> 
 
</div>