Javascript 如何创建身体背景图像幻灯片？

我到处都在搜索这个，我想要一个简单的背景幻灯片，为网站的身体背景褪色的图像

我尝试过很多Javascript都不起作用，还有CSS的东西

我想改变我的身体背景，有人要我去跳水？但是如果我做了一个DIV，那么肯定会把我的网站内容搞得一团糟，在我身体的开始有一个DIV

我知道HTML和CSS

我只是想让我的身体背景循环和褪色，我在很多网站上都看到过

---

我不明白如何才能在我的正文中这样做，而不只是在代码中添加一个小div，这样会弄乱我的网站内容？

根据您要达到的效果，您可以使用jquery在正文中添加和删除类。例如：

$("Body").removeClass("background1");
$("Body").addClass("background2");
$("Body").removeClass("background2");
$("Body").addClass("background1");

---

有关创建背景幻灯片的信息，请参见本简单教程

下载它并将其css和js包含到您的页面中，然后添加以下代码以调用它：

jQuery(function($){

        $.supersized(
             //options here
        );
});

并查看文档以使用所需的选项。

HTML

用div作为“幻灯片”的包装，可以包含任何内容

<div id="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

jQuery JavaScript

在DOM就绪后运行

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

在

元素之后创建一个#bg滑块div。并定义其css，如：

#bg-slider {
    position: absolute; /*Could be "fixed" if you need it*/
    width: 100%;
    height: 100%;
    z-index: 0 /*This value should be smaller than the other divs*/
}

---

现在，将任何滑块代码放入#bg滑块，使其具有100%的宽度和高度，然后让其滑动。它会很有魅力。

展示你已经尝试过的，并解释它是如何不按预期工作的。我怀疑是否有人会为你做你的工作。这里已经有人问过：忘了一个结尾“，显然我已经很晚了。我如何在整个身体上使用它？？？你可以稍微更改css。删除填充、边缘、顶部、左侧等。我不明白：（这是在更改一个DIV的背景：（如果我把DIV放在我的身体里，那么它肯定会弄乱我的内容吗？我想改变整个页面的背景：（我不知道什么时候运行javascript！好的，我已经编辑了JSFIDLE示例。你可以在

中添加

元素，然后在css

中添加内容。{position:absolute；z-index:10；}

。请参阅更改，我没有滑块代码：（我没有滑块代码：（@zhd）如果您要使用javascript驱动的滑块，请使用它，它有很好的文档记录并且易于使用。

#bg-slider {
    position: absolute; /*Could be "fixed" if you need it*/
    width: 100%;
    height: 100%;
    z-index: 0 /*This value should be smaller than the other divs*/
}