How to change image-background after sometime?

前端未结

关注

 5  365

HI everybody

i need to know if there are a way to change the background image after a specific time like 10 sec or 30 sec...etc. you know like yahoo Login mail \"it\

相关标签:

5条回答

一生所求

2021-01-15 16:21

If you're using the Prototype library:

var changeBackground = function() {
   $$('body').first().setStyle({
      backgroundImage: 'newImage.jpg'
   });
};
changeBackground.delay(15);

0 讨论(0)

北海茫月

2021-01-15 16:38

you can make it with javascript function

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="http://www.all-freeware.com/images/full/38943-nice_feathers_free_screensaver_desktop_screen_savers__nature.jpeg";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage").src="http://www.hickerphoto.com/data/media/186/flower-bouquet-nice_12128.jpg";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage").src="http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='300px' height='250px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body></html>

try this one! :)

0 讨论(0)

渐次进展

2021-01-15 16:38

You could probably achieve it using CSS3 webkit animations but the trade off is it will only work in the likes of Chrome and Safari but you won't require any JavaScript at all.

The jQuery suggestion above is your best bet here I guess.

0 讨论(0)
发布评论:

提交评论
- 加载中...

爱一瞬间的悲伤

2021-01-15 16:42

You could do it with a function and setTimeout:

function changeBG()
{
    var body = document.getElementsByTagName("body")[0];
    body.style.backgroundImage = "url(myimage.gif)";
    setTimeout("changeBG",30000); // Change every 30 seconds
}

window.onload = changeBG;

(untested so it might need a tweak or 2)

0 讨论(0)

猫巷女王i

2021-01-15 16:43
You could use javascript's setTimeout or setInterval to do this, or look into JQuery's Timers

EDIT: With JQuery, this will change the background after 1 sec:
```
$(window).oneTime(1000, function() {
    // change your background image here
  });
```
0 讨论(0)
发布评论:

提交评论
- 加载中...