Créer une image de fond aléatoire ou défilante

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Créer une image de fond aléatoire ou défilante

Message par mugenzaraki Ven 29 Mai 2015 - 18:09

bonjour à toutes et à tous

C'est par rapport aux tutoriels Créer une bannière aléatoire où défilante j'ai trouvé ce code qui marche très bien

Code:
        $(function() {
          var a = ["http://adresse_image_1", "http://adresse_image_2", "http://adresse_image_3"];
          $("body").css("background-image", "url("+a[Math.floor(Math.random() * a.length)]+")")
        });

mais j'ai 2 questions :

1):
 ce code il est aléatoire sans défilement, donc je cherche à ce qu'il soit avec défilement ( les 7 secondes du tutoriel )


et la 2 eme ):

avec le sans défilement quand je change de page donc l'image change mais pendant le chargement de la page qui dure peut-être 1 seconde on voit toujours la première image je m'explique par exemple je passe de la page 2 a la page 3 et pendant la seconde de chargement je vois l'image 1 quand j actualise aussi il y a la toujours premiere image qui apparait pendant le chargement
d'ou ceci peut venir ?


Dernière édition par mugenzaraki le Dim 31 Mai 2015 - 21:32, édité 1 fois
avatar

mugenzaraki
***

Messages : 103
Inscrit(e) le : 02/05/2015

Voir le profil de l'utilisateur http://www.larmee-infernale.com/
mugenzaraki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une image de fond aléatoire ou défilante

Message par ge80 Ven 29 Mai 2015 - 19:24

Bonjour

En s'imspirant du tuto et pour le défilement c'est le second script du tuto (pour un forum punbb )
Code:
        $(function() {
       
          var a = ["http://adresse_image_1", "http://adresse_image_2", "http://adresse_image_3"];
         
          b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)])};b();setInterval(b,7*1000);
       
        });

c'est la temporisation (intervalle de temps ) de 7 fois une seconde ( 1000 millisecondes )
Code:
;b(); setInterval(b,7*1000)


voir le tutoriel complet I C I ou LA


et ce message pour deux images de fond aléatoire
voir Le message d'adam_sfp
Code:
        $(function() {
                        var images  = ['http://adresse_image_1', 'http://adresse_image_1'];
        var i = 0;
       
        setInterval(function(){
            $('body').css('background-image', function() {
                if (i >= images.length) {
                    i=0;
                }
                return 'url(' + images[i++] + ')';
            });
        }, 7000);
                        });
cordialement
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

Voir le profil de l'utilisateur http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une image de fond aléatoire ou défilante

Message par mugenzaraki Dim 31 Mai 2015 - 0:40

ok merci beaucoup

j'ai une autre question dans Le message d'adam_sfp  il ya ceci : Jquery Cycle qui permet pas mal d'effets de transition entre des images.

mais je ne c'est pas trop ou je dois le placer
avatar

mugenzaraki
***

Messages : 103
Inscrit(e) le : 02/05/2015

Voir le profil de l'utilisateur http://www.larmee-infernale.com/
mugenzaraki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une image de fond aléatoire ou défilante

Message par ge80 Dim 31 Mai 2015 - 7:33

Bonjour

Les exemples proposés sont pour des animations dans un sujet.

Il y a des démos avec utilisation de pages HTML
Voir le source de la démo 1 ( la plus simple)

Vous avez les scripts et CSS associés utilisés.

Cordialement

ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

Voir le profil de l'utilisateur http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une image de fond aléatoire ou défilante

Message par mugenzaraki Dim 31 Mai 2015 - 21:30

merci
avatar

mugenzaraki
***

Messages : 103
Inscrit(e) le : 02/05/2015

Voir le profil de l'utilisateur http://www.larmee-infernale.com/
mugenzaraki a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum