javascript - 使用 jQuery 在单击时换出主体背景图像并在加载时随机化

Question

我有一个正文背景图像，它被一个名为 ezBigResize 的插件“放置”，基本上允许图像随浏览器窗口缩放。

设计者希望图像能够被页面上的一系列缩略图替换掉，同时该图像在页面加载时从该系列图像中随机化。

最初在添加这两个之前，我只是这样设置的:

$(document).ready(function() {$("body").ezBgResize({img : "/lib/img/bkgr/mainBG.jpg"});});

然后这是现在的代码(在 jQuery 工具可滚动中)

<div id="bkgrSelector">
    <div class="scrollNav">
        <a class="prev browse left"></a>
    </div>
    <div class="scrollable">   
        <div class="items">
            <img src="/lib/img/bkgr/selections/main-bg.jpg" width="77" height="44" />
            <img src="/lib/img/bkgr/selections/main-bg02.jpg" width="77" height="44" />
            <img src="/lib/img/bkgr/selections/main-bg03.jpg" width="77" height="44" />
        </div>
    </div>
    <div class="scrollNav">
        <a class="next browse right"></a>
    </div>
</div>

虽然我有点不知所措，但要允许这些在页面加载时随机化并通过 href 中的值换出图像。

我试过这样的东西，但没有用，而且显然不完整。另外，它根本没有解决随机化问题。

$('#bkgrSelector .items img[href]').click(function()
{
            $("body").css("background-image", "url()");
        });

如有任何想法、帮助等，我们将不胜感激。

Answer 1

那些是<img>指向全尺寸图像文件？我绝对讨厌使用全尺寸图像并将它们缩小到缩略图大小的网站。加载时间非常糟糕。

如果它们实际上是缩略图大小的图像，您将无法直接使用该 url 作为背景 url，因为您只是拉伸(stretch)一个缩略图大小的小图像以覆盖窗口并得到一个可怕的像素化困惑。

如果页面是动态生成的，您需要创建一个包含全尺寸图像 URL 的 JS 数组，以便在单击缩略图时，您可以从该数组中获取全尺寸 URL。或者至少有一个标准化的命名约定，这样一个简单的字符串操作就可以让您将缩略图 url 转换为全尺寸图像 url。

一旦你得到那个数组，从中随机选择一个是一件简单的事情:

var imgs = ['/url/for/img1.jpg', '/url/for/img2.jpg', etc....];

$(document).ready(function() {
   randomUrl = imgs[Math.round(Math.random() * (imgs.length - 1)) + 1];
   $("body").css("background-image", 'url(' + randomURL + ')');
});