更新時のランダム背景画像

ユーザーがサイトにアクセスするたびに画像をランダムに読み込もうとしています。私はこの問題に関する以前の2つのスレッドに従ってきたので、それを動作させるように見えません。更新時のランダム背景画像

私は現在、このチュートリアルを次のようだ：http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery

しかし、私はまだ問題を抱えています。イメージは/ images /フォルダーにあり、ファイル名は正しく配列に入力されます。

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

var images = ['OUT01ari.jpg' 'OUT02adobe.jpg' 'OUT03alife.jpg' 'OUT04chinup.jpg' 'OUT05datenightwinecologne.jpg' 'OUT06officechair.jpg' 'OUT07printer.jpg' 'OUT08whitewall.jpg' 'OUT09umbrella.jpg' 'OUT10converse.jpg' 'OUT11wardrobebar.jpg']; 

$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 

</script>

私は、ページの本文にdiv要素を入力したが、無駄に：

<body> 

<div ="#background"></div> 
<div class="container"> 

</div> 
</body>

はどこで間違ったんですか？

ありがとうございます。

出典

2013-10-14 Hohohobo

アレイを定義する際には、配列値の間にカンマ区切り記号を付ける必要があります。

また、jqueryとコードの2つの別々のスクリプト要素が必要です。

src属性のスクリプトタグのコンテンツは、ほとんどのブラウザで無視する必要があります。

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

<script type="text/javascript"> 
var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; 
$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 
</script>

W3C 4.3 Scripting HTML5は言う：

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

と同じことが、私は信じている、以前のバージョンのために真です。

編集：

ローカル・ファイル・システム上で作業している場合は、HTTPへのjQueryにURLを変更してください：//だけではなく//。

また、document readyを呼び出して#background要素が存在するときにスクリプトが実行されていることを確認してください。

この例でもローカルで動作するはずです：

<html> 
<head> 
    <style type="text/css"> 
    #background { 
    position:fixed; left: 0px; 
    top: 0px; background-size:100%; 
    width:100%; height:100%; 
    -webkit-user-select: none; -khtml-user-select: none; 
    -moz-user-select: none; -o-user-select: none; user-select: none; 
     z-index:9990; 
    } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script> 
    <script type="text/javascript"> 
    $(function() { 
    var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; 
    $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 
    }); 
    </script> 
</head> 
<body> 
    <div id="background"></div> 
    <div class="container"> 
    </div> 
</body> 
</html>

出典

2013-10-14 21:24:09 becquerel

ありがとうございます、私はisherwoodとjacouhによって指摘されたエラーと共にこれらのエラーを修正しましたが、画像はまだロードされていません。 – Hohohobo

http://jsfiddle.net/ffXUC/作品を作成しましたが、あなたがなぜそうでないのかは分かりません。ブラウザのコンソール/ウェブデベロッパーツール（ChromeのF12）でエラーが発生しましたか？ – becquerel

ありがとうございました - 私はしていませんでした。 Uncaught ReferenceError：$はindex.html：11 （無名関数）と定義されていません。 11行目：$（ '＃バックグラウンド'）.css（{'バックグラウンドイメージ'： 'url（images /' + images [Math.random（）* images.length]] + '）'} ）; – Hohohobo

<div ="#background"></div>

は

<div id="background"></div>

する必要があります（または単にタイプミスということでした？）

出典

2013-10-14 21:15:37 isherwood

' ''

–

感謝しなければなりません。一定。疲れた目。:-D – isherwood

背景画像を表示するには、divが持っている - あなたは、いくつかのサイズ/面積を持っている必要があり、これを試してみましたか？

<body> 

<div id="background" style="width: 50px; height: 60px;"></div> 
<div class="container"> 

</div> 
</body>

？

出典

2013-10-14 21:20:59 jacouh

私は既に100％の背景divの幅と高さのプロパティを与えていたので、画像は画面いっぱいになるでしょう。＃background { \t位置：固定; \t左：0ピクセル; \t top：0px; \t background-size：100％; \t幅：100％; \t高さ：100％; \t -webkit-user-select：none; -khtml-user-select：none; -moz-user-select：none; -o-user-select：none; ユーザ選択：なし; \t z-インデックス：9990; } – Hohohobo

更新時のランダム背景画像

答えて

関連する問題