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)
  • Author
    Posts
  • #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

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

    #130807

    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?

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

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

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

    #130864
    CrocoDillon
    Participant

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

    #130894
    intodesign
    Participant

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

    #130896
    intodesign
    Participant

    Sorry, it’s working.. thanks!

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

    #180649
    Paulie_D
    Member
    #180650
    Alesh
    Participant

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

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

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

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