[jQuery] Background changer in css

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Keizer Webdesign

Keizer Webdesign

12/04/2013 18:32:45
Quote Anchor link
Hallo,

Ik ben bezig met een site waarvan ik de background wil veranderen met een time interval, ik heb hier op gezocht en kon geen tut's vinden waarin er gebruik van een css verandering wordt gemaakt.

wie weet hoe ik dit wel maak?

Ik wil iets hebben met
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
var img = ['img1', 'img2', 'ect']


dit is mijn code tot nu toe, maar ik weet niet hoe ik hem werkend krijg?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function slideshow() {

var images = ['banner1.jpg', 'banner2.jpg', 'banner3.jpg'];
var i = 0;

setInterval(function(){
    $('body').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';
    });
}, 500);

}
 
PHP hulp

PHP hulp

19/04/2024 20:13:07
 
RobertJan Doeternietoe

RobertJan Doeternietoe

12/04/2013 18:38:02
Quote Anchor link
http://vegas.jaysalvat.com/

Misschien is dat iets voor je, helaas kun je zelf de tijd niet bepalen wanneer er een nieuwe background wordt weergegeven.
 
Keizer Webdesign

Keizer Webdesign

12/04/2013 18:41:52
Quote Anchor link
Bedankt, maar ik met voorgenomen dit keer alles zelf te schrijven...

R-J K
Gewijzigd op 14/05/2013 20:37:40 door Nick Dijkstra
 
 - Diov  -

- Diov -

12/04/2013 19:46:11
Quote Anchor link
Misschien een idee:

-> Je maakt een loop.
-> Je kies een willekeurige afbeelding uit een array
-> Daarna zet je een interval zodat hij even wacht.
 
Keizer Webdesign

Keizer Webdesign

12/04/2013 19:58:50
Quote Anchor link
zoiets?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="application/x-javascript">
  
window.setInterval(function(){
    
   window.setTimeout(function(){
    $('body').css('background-image','url(http://sstatic.net/stackexchange/Img/launched-ads/english.png)');
    },3000);
  
    $('body').css('background-image','url(http://www.gravatar.com/avatar/e526fad25155097bcda4a97b26d78993?s=32&d=identicon&r=PG)');
  },3000);

    

</script>

allen hoe nu verder? een loop lukt niet en een array of var.
javascripting is (nog) niet mijn sterkste kant.
 
Nick Dijkstra

Nick Dijkstra

12/04/2013 20:10:55
Quote Anchor link
Ik heb even wat aangepast: http://jsfiddle.net/LSZPA/1/
 
Keizer Webdesign

Keizer Webdesign

12/04/2013 21:08:05
Quote Anchor link
Bedankt, precies wat ik zocht.
Nu heb ik nog het probleem, als hij overspringt moet hij die afbeelding laden en dat duurt best even, kan ik nu een fadeIn of een fadeOut toevoegen? zo ja waar?
 
Eddy E

Eddy E

12/04/2013 22:11:06
Quote Anchor link
Kan je die afbeeldingen niet in een sprite (= 1 grote afbeelding) zetten en dan alleen maar de positie van de achtergrond verplaatsen?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.