Javascript 旋转背景图片

我变得绝望了。。我尝试构建一个带有旋转背景图像的站点，该图像会自动调整到窗口的大小。我对html、css、javascript等并不太感兴趣，但我已经做到了这一点，图片可以根据窗口大小进行旋转和调整。。但是当我将窗口缩放得很小时，图片会旋转出窗口。。我希望你明白我的意思

这是我的代码：

HTML

<div id="bgcon">
    <div id="bgimg">
    </div>
</div>

这就是问题所在：

我不确定是否有可能只用css来创建它，但就像我说的，我并不是很喜欢它

---

谢谢你的帮助

您应该将

bgcon

的宽度和高度设置为窗口宽度和高度最大值的更高比例，并保持方形：

var bg = document.getElementById("bgimg");

window.onresize = function() { 
    /* Compare values and set width/height based on higher value */ 
    var max = Math.max(window.innerWidth, window.innerHeight);
    bg.style.width = 2.5*max + "px";
    bg.style.height = 2.5*max + "px";
    bg.style.marginTop = -1.25*max + "px"; // Half of width/height
    bg.style.marginLeft = -1.25*max + "px"; // Half of width/height
}
window.onresize(); // Run on load

HTML:

---

上面的演示在大型浏览器中并不完美的原因是图像太小。为了抵消这一点，您可以删除图像上的

no repeat

，它将重复自身，直到占用空间为止。或者你可以用更大的图像。用一张更大、不同的图片显示它正常工作

我为一个个人项目制作了这个小家伙。只需将图像URL放入数组中，并更改选择器以填充背景图像。您可能还需要一点额外的css来用图像覆盖背景

$(document).ready(function(){
    var images = ['imageURL', 'imageUrl'],
        i = 0,
        timeoutVar;

    function changeBackground() {
        clearTimeout(timeoutVar); // just to be sure it will run only once at a time

        $('.YourSelector').css('background-image', function() {
            if (i >= images.length) {
                i=0;
            }
            return 'url(' + images[i++] + ')';      
        });

        // call the setTimeout every time to repeat the function
        timeoutVar = setTimeout(changeBackground, 3000);
    }

    // Call it
    setTimeout(changeBackground() , 5000);

});

编辑：

使用一些CSS，您可以使背景图像“覆盖”背景

html { 
  background: url() no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

摘自：

工作小提琴：

---

希望这有帮助

您需要根据最大尺寸（宽度或高度）设置元素的大小。您指的是#bgimg？hmm中的宽度/高度。。对不起，请问我应该在哪里写。我真的处于起步阶段。图像大小的值？@Zachsauier“使用旋转背景图像构建站点”。我没有制作幻灯片。它是一个带有选择器的函数。他所需要做的就是使用主体作为选择器，这将解决他的问题。你的意思是将它添加到html代码中的我的代码中并替换imageURL？是的。我刚刚用一些额外的css进行了编辑，以帮助您用图像覆盖整个背景@Zachsauier，这很有趣，因为他特别说“我试图建立一个有旋转背景图像的网站”。关键词：轮换。让我们明确一点：你的解决方案没有涉及轮换。顺便说一下，你可以只使用CSS，不需要javascript或jQuery。我会试试，给我一些时间：）好的，让我们看看。。我使用的图片大小为正方形（768x768px），我删除了“无重复”。我应该在哪里知道窗口的最大值，因为它应该在不同的大小上运行？/*比较值并根据更高的值设置宽度/高度*/使我困惑：/谢谢您的帮助help@user3524991

window.innerWidth

和

window.innerHeight

获取当前窗口的宽度和高度。扎克发布的代码应该已经可以正常工作了。我想指出的是，你的图像最短的一面需要大于从窗口角到角的对角线距离，否则当它旋转时，你仍然可以看到角上的光线。除了最极端的情况外，250%应该涵盖所有情况，但对于大多数windows来说可能是过火了。事实上，我在这里用了一张小图片尝试了它，但在我电脑上的文件中，它不起作用。我不明白为什么。。只有在我的css文件中为#bgimg添加高度和宽度，您才能看到图片。。我在中添加了js，主体中只包含其他所有内容，与小提琴中的内容完全相同。好的，我知道了！非常感谢你！

#bgimg {
    position:fixed;
    /* Center element on page */
    top:50%; left:50%;
    /* You have to center the image using center center */
    background: url("http://sidekickwallpapers.com/wp-content/uploads/2014/03/space-wallpapers-1920x1080-design-ideas-space-wallpapers-s3vgbbit.jpg") center center no-repeat;
    animation:spin 150s linear infinite;
    transform-origin:center center; /* Makes it rotate about the center */
    /* Others */
}

$(document).ready(function(){
    var images = ['imageURL', 'imageUrl'],
        i = 0,
        timeoutVar;

    function changeBackground() {
        clearTimeout(timeoutVar); // just to be sure it will run only once at a time

        $('.YourSelector').css('background-image', function() {
            if (i >= images.length) {
                i=0;
            }
            return 'url(' + images[i++] + ')';      
        });

        // call the setTimeout every time to repeat the function
        timeoutVar = setTimeout(changeBackground, 3000);
    }

    // Call it
    setTimeout(changeBackground() , 5000);

});

html { 
  background: url() no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}