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

您只需要生成一次随机数：

// 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 回答
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 加载，以便将源页面缓存在服务器上。这比等待每个图像加载或担心预加载或任何事情要快得多。

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

或者

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