Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Change Body Background Every 10 sec

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • Author
    Posts
  • April 5, 2013 at 6:28 pm #39298
    intodesign
    Participant

    Hey All,

    I would like to Change the Body Background Every 10 sec and i have already something that does that…
    but it’s not working at all the monitors (i guess not the wide-screen) and what i have also it’s kinda heavy

    I just need a simple jquery code or something simpler to change the background image every 10 sec

    April 5, 2013 at 10:53 pm #130786
    intodesign
    Participant

    what does it had to do with what i’m asking?

    i want like a slideshow of the body, i want that every 10 seconds the body of the css will load a different image

    body { background: url(image1.jpg); }
    body { background: url(image2.jpg); }

    first load image1.jpg… then after 10 seconds load image2.jpg, simple

    anyone can direct me ?

    April 6, 2013 at 5:58 am #130807
    Historical Forums User
    Participant

    There are also a number of Jquery plugins such as [This](http://buildinternet.com/project/supersized/ “”) which you can use, from here you can control the duration an image takes to carousel (10 seconds..)

    This what you were after?

    April 6, 2013 at 6:03 am #130808
    CrocoDillon
    Participant

    $(function() {
    var body = $(‘body’);
    var backgrounds = new Array(
    ‘url(image1.jpg)’,
    ‘url(image2.jpg)’
    );
    var current = 0;

    function nextBackground() {
    body.css(
    ‘background’,
    backgrounds[current = ++current % backgrounds.length]
    );

    setTimeout(nextBackground, 10000);
    }
    setTimeout(nextBackground, 10000);
    body.css(‘background’, backgrounds[0]);
    });

    You don’t need to set the initial background in css, that’s what the last line is there for. That way you can keep all the backgrounds together, easier to maintain. :) You are not limited to background images, you can add colors and gradients to the array too.

    April 6, 2013 at 6:23 am #130811
    Kitty Giraudel
    Participant

    Change body’s ID/Class every 10 seconds. Each class/ID maps a specific background.

    I guess JS will be lighter than if you try to change the background dynamically.

    Quick example: http://jsfiddle.net/xdUBZ/1/

    April 6, 2013 at 10:57 am #130833
    intodesign
    Participant

    @AdamHodgson – I’m using already ‘supersized’ but it doesn’t support all the monitors, if you having a widescreen probably you’ll see it good in all browsers, but old monitors it doesn’t do the stretch, but it’s not the issue , this plugin is too heavy for what i’m asking for.


    @CrocoDillon     – Your code looks like something that i really need, but can you help me a little? i’ve tried to do that and i see nothing,
    i put the images in the same folder , how do the markup should look like?

    April 6, 2013 at 6:06 pm #130864
    CrocoDillon
    Participant

    Did you include jQuery? No special markup or css needed with that script.

    April 7, 2013 at 2:56 am #130894
    intodesign
    Participant

    it has error on the second line that you wrote,
    can you check it please?

    April 7, 2013 at 4:06 am #130896
    intodesign
    Participant

    Sorry, it’s working.. thanks!

    August 26, 2014 at 5:09 am #180648
    Alesh
    Participant

    Hugo Giraudel, great. work….
    is it possible to change pictures with fade effect? If so…..this functions has no mistake! Can you help me please?

    August 26, 2014 at 5:19 am #180649
    Paulie_D
    Member

    http://www.sitepoint.com/responsive-fullscreen-background-image-plugins/

    August 26, 2014 at 5:27 am #180650
    Alesh
    Participant

    yes…thx a lot…but it´s not behave as picture in body…:(

    August 26, 2014 at 6:35 am #180653
    Paulie_D
    Member

    but it´s not behave as picture in body

    Unfortunately, that’s not very clear.

    Perhaps you should start a new thread (this one is quite old) with more specific details of what you are trying to do.

    June 11, 2018 at 12:52 pm #272511
    Punyah
    Participant

    @CrocoDillon I just tried doing as below

    I have kept images and all the in the same folder but it is not working for me just the plain screen is displaying

    Script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$(function() {
var body = $(‘body’);
var backgrounds = new Array(
‘url(image1.jpeg)’,
‘url(image2.jpeg)’,
‘url(image3.jpeg)’
);
var current = 0;
function nextBackground() {
body.css(
‘background’,
backgrounds[current = ++current % backgrounds.length]
);

setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css(‘background’, backgrounds[0]);
});
</Script>
</head>
<body id="body">
</body>
<footer></footer>
    June 12, 2018 at 1:04 am #272525
    CrocoDillon
    Participant

    @punyah maybe you need two script tags, one to include jQuery and one for the script. Not sure if it’s going to work your way. Old thread by the way o_0

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • The forum ‘JavaScript’ is closed to new topics and replies.