Changer le fond d'écran à intervalle régulier

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Changer le fond d'écran à intervalle régulier

Kortex@HFR

Qu'ils sont cons ces lamas !!!

Bonjour à tous,

Je cherche à changer le fond d'écran de ma page Web à intervalle régulier, avec un effet de transition défilement horizontal de la droite vers la gauche. Je trouve des exemples de code pour faire défiler des images dans un bloc DIV ou autre, mais pas tout le fond d'écran. Et vue que je ne suis pas doué en JS/CSS, je n'arrive pas à adapter le code pour mon besoin

Vous auriez un exemple que je puisse reprendre ?

Merci d'avance

---------------
Au coeur du swirl - Mon feed

Publicité

rufo

Pas me confondre avec Lycos!

Il suffit, dans ton code HTML, que la div que tu mettras juste après le body porte l'image de fond d'écran et que cette div ait une largeur et hauteur de 100%. Après, un petit coup de javascript pour qu'à intervalle régulier, l'image change (tu fais un tableau d'url d'images). Pour la transition, faudra aussi du javascript pour gérer les fondus.

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Kortex@HFR

Qu'ils sont cons ces lamas !!!

J'essaie de mettre ta solution en pratique. Problème : quand je mets mon DIV pour placer l'image, elle décale tout vers le bas Je dois mettre quoi comme position pour que tout passe par dessus le DIV d'image de fond ?

~~Trouvé Maintenant, trouver comment adpater l'image au DIV vu qu'elle est plus grosse que la taille de l'écran (volontaire).~~

Fait. Maintenant, changer l'image à intervalle régulier.

Message édité par Kortex@HFR le 06-04-2016 à 11:13:38

---------------
Au coeur du swirl - Mon feed

Kortex@HFR

Qu'ils sont cons ces lamas !!!

J'essaie de faire la chose suivante :

window.onload = setInterval(setBackground(), 5000);

L'image est bien chargée une première fois, mais ne bouge plus après

Quel est le problème ?

Message cité 1 fois

---------------
Au coeur du swirl - Mon feed

rufo

Pas me confondre avec Lycos!

Il faut que dans la fonction setBackground(), tu relances le timer avec un setInterval()

Kortex@HFR

Qu'ils sont cons ces lamas !!!

Je m'y suis pris de la manière suivante pour faire tourner les images en boucle :

Code :

var imagediaporama = 0;
function setBackground(){
imagediaporama++;
document.getElementById('background').style.backgroundImage = 'url("./images/diaporama0'+imagediaporama+'.jpg" )';
if (imagediaporama > 2 ) {
imagediaporama = 0;
}
setTimeout(function() {setBackground() }, 2000);
}
window.onload = setBackground();

Ca fonctionne Maintenant, comment faire pour que la transition se fasse de la droite vers la gauche ? Vous auriez un bout de code tout fait ?

Message édité par Kortex@HFR le 06-04-2016 à 13:50:31

---------------
Au coeur du swirl - Mon feed

SICKofitALL

misanthrope

Kortex@HFR a écrit :

J'essaie de faire la chose suivante :

window.onload = setInterval(setBackground(), 5000);

L'image est bien chargée une première fois, mais ne bouge plus après

Quel est le problème ?

En faisant ca, tu executes la fonction "setBackground" et c'est sur le retour de cette derniere que cyclera setInterval
Essayes ca :

Code :

var setBackground = function ()
{
// ...
// ... ton code
// ...
// au lieu de faire un setInterval qui va relancer la même fonction ad infinitum, tu la relances "manuellement",
// comme ca tu évites les "boucles infinies" en cas d'erreur
setTimeout (setBackground, 5000);
}
window.onload = function ()
{
setTimeout (setBackground, 5000);
}

Message édité par SICKofitALL le 06-04-2016 à 13:59:51

---------------
We deserve everything that's coming...

SICKofitALL

misanthrope

Argh, grillled

Essaye :

Code :

imagediaporama++;
imagediaporama &= 2;

et ca marche aussi dans l'autre sens, càd avec imagediaporama--

EDIT :
Plus "propre" peut-être, en feintant avec les modulos, et permettre ainsi de gerer les chiffres positifs mais aussi négatifs (càd dans ton cas -1) :

Code :

Number.prototype.mod = function (n) { return ((this % n) + n) % n; };

Message édité par SICKofitALL le 06-04-2016 à 14:03:39

---------------
We deserve everything that's coming...

sodimel

rfe raw drah !

Je l'ouvre juste pour proposer une solution en full css

Alors en faisant juste une ptite recherche jsuis tombé sur cet article (avec des démos o/), et du coup bah ça a l'air plus joli à implémenter que le javascript

---------------
l3m - twinoid - bmc

chrispc

Regardes du côté du keyframes en CSS.

Tu peux faire une sorte de carrousel qui te permettra de faire ton effet.
J'ai pas d'exemple là pour te montrer le code

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7

Publicité

Kortex@HFR

Qu'ils sont cons ces lamas !!!

Je m'en suis sorti en faisant un effet d'alpha en JS/CSS, c'était pas exactement ce que je voulais faire à la base (transition en slide) mais ça fait son taf et c'est plus mal finalement. En tout cas, ça m'a bien fait évoluer sur la compréhension des empilage de calque et le positionnement en CSS, c'est cool

---------------
Au coeur du swirl - Mon feed

FORUM HardWare.fr

Programmation

HTML/CSS

Changer le fond d'écran à intervalle régulier

Sujets relatifs
Changer les données affichées sur une page Web	! UP ! VBScript Changer une imprimante par défaut grâce à son IP
Changer la valeur d'un champs par choix multiple	Changer le champs d'un enregistrement d'une table
[resulu]Changer de répertoire courant sans shell sur Gnu/Linux.	script steam big picture + écran secondaire
Changer couleur bouton selon variable	programme un écran à led
changer le nom table dans ma page	Convertir un fichier Swf en fichier pour "écran de veille sous Windows
Plus de sujets relatifs à : Changer le fond d'écran à intervalle régulier

Page générée en 0.083 secondes