13

ユーザーがサイトにアクセスするたびに画像をランダムに読み込もうとしています。この問題に関するチュートリアルといくつかの以前のスレッドをたどりましたが、うまくいかないようです。画像は /images/ フォルダーにあり、ファイル名は配列に正しく入力されています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<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>

次に、ページの本文に div を入力しましたが、役に立ちませんでした:

<body>

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

</div>
</body>

どこが間違っていますか？

4

3 に答える 3

23

配列を定義するときは、配列値の間にコンマ区切りを入れる必要があります。

また、2 つの個別のスクリプト要素が必要です。1 つは jquery を含めるためのもので、もう 1 つはコードのためのものです。

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 スクリプティング HTML5は次のように述べています。

src 属性がある場合、要素は空にするか、スクリプト コンテンツの制限にも一致するスクリプト ドキュメントのみを含める必要があります。

そして、同じことが以前のバージョンにも当てはまります。

編集：

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

また、 on 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-14T21:24:09.023 に答える
3 
<div ="#background"></div>

する必要があります

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

（それともただのタイプミス？）

于 2013-10-14T21:15:37.600 に答える
0

背景画像を表示するには、div にある程度のサイズ/領域が必要です。これを試しましたか?

<body>

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

</div>
</body>

?

于 2013-10-14T21:20:59.790 に答える