Changer le fond du corps de l'intervalle de la page

J'ai actuellement:Changer le fond du corps de l'intervalle de la page

<script type='text/javascript'> 
var imageID=0; 
function changeimage(every_seconds){ 
//change the image 
if(!imageID){ 
    document.getByTagName("body").src="icwXI.jpg"; 
    imageID++; 
} 
else{if(imageID==1){ 
    document.getByTagName"body").src="JvuP9.jpg"; 
    imageID++; 
//call same function again for x of seconds 
setTimeout("changeimage("+every_seconds+")",((every_seconds)*20)); 
</script> 
</head> 
<body style='background: url(icwXI.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;' onload='changeimage(1)'>

L'objectif est d'avoir l'image de fond du corps charge icwXI.jpg d'abord, puis passer à JvuP9.jpg 20 secondes plus tard, puis le cycle retour à icwXI .jpg encore 2 secondes plus tard.

Cependant, cela ne semble pas fonctionner, mes compétences avec JavaScript est assez limitée.

Merci.

Source

2012-06-02 Dean

Je pense que vous devriez utiliser l'intervalle setInterval au lieu de setTimeout. – solartic

Tout d'abord, vous devez corriger quelques erreurs de syntaxe. Les deux premiers que je vois ne terminent pas deux parenthèses commençant {, et manquant une parenthèse sur le second document.getByTagName.
Votre fonction ne «dort/expire» pas lorsqu'elle est appelée pour la première fois, en modifiant immédiatement l'image d'arrière-plan lorsque la fonction est appelée.
Notez également que lorsque vous setTimeout() la fonction de le répéter, le second paramètre est en fait millisecondes, pas secondes comme vous semblez l'intention.
Votre fonction ne modifiera deux fois <body>, puisque imageID ne cesse d'augmenter, et il n'y a que des cas de non-set (qui devrait vraiment être la vérification des imageID==0) et 1. Vous devez changer, donc il y a des cas pour chaque arrière-plan que vous voulez faire pivoter.
document.getTagByName("body").src n'est pas la bonne façon de changer l'image de fond. document.body.style.backgroundImage est.

Source

2012-06-02 02:50:50 Litty

Créer un tableau d'images d'arrière-plan - ci-dessous Je l'ai fait avec quelques images placekitten. Deuxièmement, créez une fonction qui change l'arrière-plan avec le suivant dans le tableau. Pour suivre notre localisation, nous utiliserons une variable (nous pourrions utiliser le .indexOf sur les baies dans les navigateurs les plus récents, bien que le support soit faible dans certaines régions).

Enfin, nous allons créer un intervalle qui s'exécute toutes les 23 secondes. Quand il s'exécute, il appelle notre fonction swapBG, puis crée immédiatement un timeout qui appellera à nouveau notre fonction swapBG après 2 secondes.

// backImg for tracking which image we're showing 
// dbStyle is a quick reference to the style list on the body 
// backgnd is an array of potential background images 
var backImg = -1, 
    dbStyle = document.body.style, 
    backgnd = [ 
     'url(http://placekitten.com/350/350)', 
     'url(http://placekitten.com/349/349)' 
    ]; 

// Steps forward through background images, then back to start 
// when it reaches the end of the list 
function swapBG() { 
    dbStyle.backgroundImage = backgnd[ backImg++ ] 
     ? backgnd[ backImg ] 
     : backgnd[ backImg = 0 ]; 
} 

// Call swapBG() immediately 
swapBG(); 

// Create an interval that runs every 23 seconds 
setInterval(function(){ 
    swapBG(); 
    // Create a timeout to run after 2 seconds 
    setTimeout(function(){ 
     swapBG() 
    }, 2000); 
}, 23000);

Démo: http://jsfiddle.net/XsAWB/2/

Source

2012-06-02 03:21:09 Sampson

Salut, j'ai décidé d'aller avec Mootools car il a l'effet de fondu que je suis après. Après quelques recherches je suis venu avec ce script mais ça ne change pas les images, pourquoi? http://jsfiddle.net/Mykdd/1/ – Dean

@Dean Vous changez complètement la substance de votre question. – Sampson

Ainsi, je veux juste que l'image de fond du corps change et apparaisse. – Dean

Changer le fond du corps de l'intervalle de la page

Répondre

Questions connexes