comment changer l'image sur le défilement jquery


Réponse 1:

Réponse 2:

Harun Šmrković Il suffit de l'étendre un peu pour plus de flexibilité…

cycle var = 0;var allBackgrounds = ["img1.png", "img2.png", "img3.jpg", "img4.jpg", "img5.png"];setInterval (fonction () { if (cycle <5) { document.body.style.backgroundImage = "url ('" + allBackgrounds [cycle] + "')"; cycle + = 1; } autre { cycle = 0; }}, 5 000);

Réponse 3:
// script.js // définir les classes d'arrière-plan en css var backgroundClasses = ['classe1', 'classe2', 'classe3']; (fonction changeBackground () { var nOfBackgrounds = backgroundClasses.length; var i = 0; setInterval (fonction () { console.log ("valeur de i =" + i); console.log ("classe supprimée:" + backgroundClasses [i]); $ ('corps'). removeClass (backgroundClasses [i]); var newClass = (i + 1)% nOfBackgrounds; $ ('corps'). addClass (backgroundClasses [nouvelleClasse]); i = nouvelleClasse; console.log ("classe ajoutée:" + backgroundClasses [i]); }, 5 000); }) ();

Réponse 4:

utilisez le JavaScript setTimeout et mettez en boucle toutes les 5 secondes (5000 millisecondes) et toutes les 5 secondes changez la classe de l'élément dont vous souhaitez modifier l'arrière-plan.

Ensuite, dans votre feuille de style, attribuez un arrière-plan différent à chaque classe que vous échangez

par exemple:

.container.background1 {arrière-plan: url ('image.png'); }

.container.background2 {arrière-plan: url ('picture2.png'); }

Ensuite, vous pouvez utiliser l'animation d'image clé CSS3 pour un effet de fondu entrant / sortant


Réponse 5:
setInterval (fonction () { document.body.style.backgroundImage = "url ('img_tree.png')";}, 5000)