0

IDが「home」のセクションがあります。ページの読み込み時に「ホーム」セクションの背景画像を変更するJSが少しあります。

全部で5つの背景画像があり、5つのロゴ画像もあります。各ロゴは特定の背景画像とペアになっています。正しいロゴが正しい背景画像で読み込まれるようにコードを変更するにはどうすればよいですか？ロゴはインラインで表示する必要があるため、実際にはHTMLドキュメントに表示されます。「red-cherry」というコンテナにロゴを追加しようとしましたが、すべてのコードが壊れています。

これを実行しようとしましたが、ロードされている背景画像を確認しようとしていないことを理解しています。

JS

// Create an array of images
var images = ['a-pat.jpg', 'b.jpg', 'c-pat.jpg', 'd-pat.jpg', 'f-pat.jpg'];
var logos = ['cr-pink.png', 'cr-cherry.png', 'cr-green.png', 'cr-blue.png', 'cr-red.png'];

// Display one random one each time the page loads
$('#home').css({'background-image': 'url(../img/wallpaper/' + images[Math.floor(Math.random() * images.length)] + ')'});

$("h1.cherry-red").append({'<img src="../img/logos/' + logos[Math.floor(Math.random() * logos.length)] + '"/>')});

HTML

<section id="home">
    <h1 class="cherry-red"><span>Cherry Red</span></h1>
</section>

明確にするために

#homeに読み込まれている背景画像を確認してから、正しいロゴをH1に読み込む必要があります。a-pat.pngが背景画像として読み込まれる場合は、ロゴcr-pink.pngのみを読み込むとどういうわけか言う必要があります。

詳細説明

すでに持っているコードの後に​​、たくさんのifステートメントを追加できますか？例：images ='a-pat.png'の場合、cr-pink.pngをH1に追加します。そうでない場合、images = b.jpgの場合、cr-cherry.pngをH1に追加します。これは可能ですか？

4

3 に答える 3

1

両方に同じランダム インデックスを使用します。

var images = ['a-pat.jpg', 'b.jpg', 'c-pat.jpg', 'd-pat.jpg', 'f-pat.jpg'];
var logos = ['cr-pink.png', 'cr-cherry.png', 'cr-green.png', 'cr-blue.png', 'cr-red.png'];

var rnd = Math.floor(Math.random() * images.length);

$('#home').css({'background-image': 'url(../img/wallpaper/' + images[rnd] + ')'});
$("h1.cherry-red").append('<img src="../img/logos/' + logos[rnd] + '"/>');
于 2013-01-30T16:06:46.857 に答える
0

私はかつて同様の問題を抱えていましたが、それを別の方法で処理しました。

divと画像でページを作成しました

pageimages.html

<div id="image1"><image src="myimage1.gif"></div>
<div id="image2"><image src="myimage2.gif"></div>
<div id="image3"><image src="myimage3.gif"></div>

次に、画像にjquery loadを使用して、ソースページがサーバーにキャッシュされるようにしました。これは、各画像が読み込まれるのを待ったり、プリロードなどを心配したりするよりもはるかに高速でした。

$('#home').load('pageimages.html #image1');

また

$('#home').load('pageimages.html #image2');
于 2013-01-30T16:16:10.160 に答える
0

乱数を一度だけ生成する必要があります。

// Display one random one each time the page loads
var imageNumber = Math.floor(Math.random() * images.length);
$('#home').css({'background-image': 'url(../img/wallpaper/' + images[imageNumber] + ')'});
$("h1.cherry-red").append({'<img src="../img/logos/' + logos[imageNumber] + '"/>')});
于 2013-01-30T16:07:11.830 に答える