Dynamically Changing CSS Background Image

前端未结

关注

 5  428

What I\'m looking for is a way to make my HTML header tag change background images every few seconds. Any solutions are welcome, as long as it is not to complex.

I h

相关标签:

5条回答

失恋的感觉

2020-12-10 05:20
Made a few amendments to your code

DEMO: http://jsfiddle.net/p77KW/
```
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]);
```
Biggest changes (as noted in others comments) is that you have to use apostrophe**'**s, not those funky open and close single-quotes and that your array wasn't correct.

With these corrections out of the way I simplified a few things:
1. Increment current then take modulus (I know this is basically what you did but how much easier is that to debug ;))
2. Target background-image directly
3. Used setInterval() instead of a double call to setTimeout
0 讨论(0)
发布评论:

提交评论
- 加载中...
生来不讨喜

2020-12-10 05:22
It must be late but may help to another one. For this goal in some situations I prefer to use a jquery plugin named tcycle which have only a few lines of code and supports just fade transition, but it works smoothly even with large images.

Setting up a slideshow with tcycle is easy and even could be done with declarative markup such as
```
<div class="tcycle">
<img src="p1.jpg">
<img src="p2.jpg">
</div>
```
The trick could be donde using css z-index:-1 for container div and setting width and height to 100%

Homepage for downloading and check for other examples is Malsup jQuery plugins
0 讨论(0)
发布评论:

提交评论
- 加载中...
天命终不由人

2020-12-10 05:35

You could acheive this same technique with HTML/CSS Only by 1. placing images within an "img" tag in your HTML surrounded by a "div wrapper" and setting it to position:relative and div wrapper img's to position:absolute. For full-width/full-height you can use percentages or potentially "background-size:cover" (haven't checked) and then call a CSS animation to change the images dynamically.

Or 2. you can add multiple images to a background in your CSS separated by commas, apply background-size:cover and again use CSS animations to change the background.

Here's an example and also Mozilla CSS3 Animation Documentation

0 讨论(0)
发布评论:

提交评论
- 加载中...

一个人的身影

2020-12-10 05:40

<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>

0 讨论(0)

无人共我

2020-12-10 05:44

You can't delimit JavaScript strings with ‘ characters. You must use " or '.

0 讨论(0)
发布评论:

提交评论
- 加载中...