Javascript 动态更改CSS背景图像_Javascript_Jquery_Html_Css

Javascript 动态更改CSS背景图像

javascript jquery html css

Javascript 动态更改CSS背景图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我要寻找的是一种让我的HTML头标记每隔几秒钟更改背景图像的方法。只要不太复杂，任何解决方案都是受欢迎的我现在有了这段代码，还链接到了JQuery：我的HTML标题：和CSS： .mainHeader { background: no-repeat center bottom scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size:

我要寻找的是一种让我的HTML头标记每隔几秒钟更改背景图像的方法。只要不太复杂，任何解决方案都是受欢迎的

我现在有了这段代码，还链接到了JQuery：

我的HTML标题：

和CSS：

.mainHeader {
    background: no-repeat center bottom scroll; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 150px;
    padding-top: 2%;
    font-size: 100%;
}

现在我已经有了背景图片。

你不能用

“

字符来分隔JavaScript字符串。您必须使用

“

或

”

对您的代码进行了一些修改

演示：

最大的变化（如其他评论所述）是您必须使用撇号**'**s，而不是那些时髦的单引号，并且您的数组不正确

通过这些修正，我简化了一些事情：

增量

current

然后取模数（我知道这基本上就是您所做的，但调试

；）要容易得多）

）

目标

背景图像

直接

使用了

setInterval（）

而不是双重调用

setTimeout


$（文档）.ready（函数（）{
变量头=$（'body'）；
var backgrounds=新数组(
'网址(http://placekitten.com/100)'
，'网址(http://placekitten.com/200)'
，'网址(http://placekitten.com/300)'
，'网址(http://placekitten.com/400)'
);
无功电流=0；
函数nextBackground（）{
电流++；
当前=当前的%1.2.1长度；
css（'background-image'，backgrounds[current]）；
}
设置间隔（下一个背景，1000）；
css（'background-image'，backgrounds[0]）；
});

你只需1就可以在HTML/CSS中实现同样的技术。将图像放在HTML中的“img”标记内，并用“div wrapper”将其设置为position:relative，将div wrapper img设置为position:absolute。对于全宽/全高，你可以使用百分比或潜在的“background size:cover”（未选中）然后调用CSS动画来动态更改图像

或者2.您可以将多个图像添加到CSS中以逗号分隔的背景中，应用背景大小：cover，然后再次使用CSS动画更改背景

这是一个例子，还有Mozilla，它一定很晚了，但可能对另一个有所帮助。为了实现这一目标，在某些情况下，我更喜欢使用名为tcycle的jquery插件，它只有几行代码，并且只支持淡入淡出过渡，但即使在处理大型图像时，它也能顺利工作

使用tcycle设置幻灯片放映很容易，甚至可以使用声明性标记（如

<div class="tcycle">
<img src="p1.jpg">
<img src="p2.jpg">
</div>

使用cssz-index:-1表示容器div，并将宽度和高度设置为100%，就可以实现这个技巧

下载和检查其他示例的主页是

您的数组错误…缺少一些逗号..引号字符串也错误。感谢您的帮助，但目前还没有任何效果。我将您的代码复制并粘贴到我的页面中，在我的

脚本

标记中。也像您所说的那样标记了

背景图像

。仍然是我et完全没有图像，这毫无意义。@CWDesign你能用PlaceKitten链接试试吗？是的，就像你一样。@CWDesign控制台中有错误吗？你能给我们一个链接吗？它似乎可以工作。你必须等待一段时间，但它确实可以工作。延迟是由于等待加载图像造成的。一旦加载，代码似乎运行得很好；agreed？@daekano我希望你是在开玩笑。@rvighne我当然是：P根据我的经验，你在Word之外的任何地方都很少看到这样的引用。谢谢各位，我现在可以用了，谢谢你们的帮助。不过还有一件事。我能得到这个：

var header=$（'header'）吗；

调用

类而不是元素。我想应用到我的HTML5
？弄明白类的事情似乎一切都正常非常感谢你的帮助，非常感谢。@CWDesign你能更改接受的答案吗，因为这家伙似乎是从下面的e用户？当背景发生变化时，我如何允许平滑过渡？@Rommeli我将创建背景图像，并将其设置为具有z-index:-1的身体直接子对象，并在更改新容器的背景图像时使用不透明度。这是一个糟糕的主意。它将首先加载所有图像。这是一个真正的解决方案，只使用HTML/CSS的解决方案总是比添加JavaScript更可取！谢谢。您可以扩展一下#2，有什么.CSS可以实际旋转/更改堆叠的背景图像？
var header = $('body');

var backgrounds = new Array(
    'url(http://placekitten.com/100)'
  , 'url(http://placekitten.com/200)'
  , 'url(http://placekitten.com/300)'
  , 'url(http://placekitten.com/400)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');

var backgrounds = new Array(
    'url(http://placekitten.com/100)'
  , 'url(http://placekitten.com/200)'
  , 'url(http://placekitten.com/300)'
  , 'url(http://placekitten.com/400)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);
});
</script>
</head>
<body>
<header></header>
</body>
</html>

<div class="tcycle">
<img src="p1.jpg">
<img src="p2.jpg">
</div>