Question

我到处寻找这个，我想要一个简单的背景幻灯片，为网站的身体背景淡化图像。

我尝试过很多没有用过的Javascript和CSS的东西。

我希望我的身体背景能够改变，有人邀请我做DIV吗？但是，如果我制作一个DIV，那么肯定会在我的身体开始时完全弄乱我的网站内容有一个DIV ......

我知道HTML和CSS。

我只是希望我的身体背景能够循环和消退，我已经在很多网站上看到了它

我不明白我怎么能这样对待我的身体而不只是在我的代码中添加一个会弄乱我的网站内容的div？

Answer 1

Depending on what effect you are going for you could just add and remove classes to the body using jquery. For instance:

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

Answer 2

请参阅此简单教程以创建背景幻灯片。

http://tympanus.net/codrops/2013/04/17/background-slideshow/

Answer 3

try this plugin - supersized

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

jQuery(function($){

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

并查看文档以使用您想要的选项。

Answer 4

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>

CSS

幻灯片需要绝对定位在包装内。这有一点额外的pizazz：

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

jQuery JavaScript

在DOM准备就绪后运行。

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

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

Try this code

Answer 5

在<body>元素之后创建一个#bg-slider 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-slider中，宽度和高度均为100％，然后滑动。它会像魅力一样工作。

如何创建BODY背景图像幻灯片？

5 个答案: