如何用旋转的背景图像填充浏览器窗口？答案

【问题标题】：How to fill browser window with rotating background Image?如何用旋转的背景图像填充浏览器窗口？
【发布时间】：2011-03-30 22:30:48
【问题描述】：

我试图弄清楚如何用背景图像填充浏览器窗口，并在用户调整浏览器窗口屏幕时调整图像比例。

另外，我想让背景图像在 3 到 5 个不同的图像之间旋转。

我所追求的一个例子可以在这里看到：

http://elegantthemes.com/preview/InStyle/

【问题讨论】：

我没有使用 wordpress，因此我无法使用主题。我不想创建具有相同效果的自己的网站。除非我误解了你在说什么？

标签： javascript jquery html css background

【解决方案1】：

改变背景的概念很简单。这是一个简单的例子，我通过改变身体类别来改变背景。

var bg = ['img3', 'img1', 'img2'];
$.each(bg, function(index, ui) {
    setTimeout(function() {
        $('body').removeAttr('class').addClass(ui);
    }, 2000 * index)
});

在http://jsfiddle.net/ewsQ7/查看工作示例

【讨论】：

我将如何使用上面的代码获得“淡化”效果？
嗯.... 理想情况下，我想复制这些家伙在上面的示例站点所做的事情。您的解决方案非常接近，除了它会立即发出嗖嗖声而不是淡入淡出过渡.....嗯

【解决方案2】：

他们正在使用 jquery 在图像和文本之间进行交叉淡入淡出。查看第 27 行

http://elegantthemes.com/preview/InStyle/wp-content/themes/InStyle/js/custom.js

我不会为此剪切和粘贴 js 代码，因为它是 wordpress 的付费主题。如果您不想自己编写所有内容，我建议您购买该主题，因为它完全符合您的要求。

http://www.wpthemesnews.com/theme-releases/instyle-a-premium-wp-theme-from-elegantthemes/

【讨论】：

谢谢。我有点（或很多菜鸟），所以请和我一起裸露。我没有使用 wordpress，因此我可以购买主题并使用它（或者如果我仍然可以使用它，尽管不使用 wordpress，我会很乐意购买并使用它）。那么有没有办法获得相同的效果，（即用图像填充背景，然后循环播放？）