Javascript 使用jQuery在单击时交换身体背景图像，并在加载时随机化

我有一个身体背景图像，由一个名为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>

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

这些是指向完整大小的图像文件的吗？我绝对讨厌使用全尺寸图像并将其缩小到缩略图大小的网站。加载时间是消耗性的

如果它们实际上是缩略图大小的图像，您将无法直接使用该url作为背景url，因为您只需拉伸一个缩略图大小的小图像来覆盖窗口，就会得到一个可怕的像素化混乱

如果页面是动态生成的，则需要创建一个JS数组，该数组包含完整大小的图像url的url，以便在单击缩略图时，可以从该数组中获取完整大小的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 + ')');
});

---

谢谢Marc，我将为小图像生成单独的拇指。我只是想让我的问题尽可能简单。我已经根据您的解决方案启动并运行了它。

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 + ')');
});