changer l'image de fond jquery

donc im essayant de faire pivoter l'image de fond à partir d'un ensemble de trois images que j'ai. J'ai trouvé un moyen de le faire mais quelque chose se passe ici. De l'exemple ci-dessous, vous devriez obtenir i = 0, 1 et 2, mais atteint toujours la valeur 3 !! et newBg [3] est indéfini! il reste 10 secondes ne laissant rienchanger l'image de fond jquery

vous pouvez trouver un exemple de travail ici: http://www.goesenlinea.com/agus/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <!--[if IE ]> 
    <link href="css/bootstrap.min.ie.css" rel="stylesheet"> 
    <![endif]--> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jqueryBg.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 
    <style> 
     body { 
      background: url('img/fond1.png') no-repeat center center fixed; 
      background-color: black; 
      -moz-background-size: cover; 
      -webkit-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
      -webkit-transition: 2s; 
      -moz-transition: 2s; 
      -ms-transition: 2s; 
      -o-transition: 2s; 
      transition: 2s; 

     } 
     .blackbox { 
      /*border-top: 1px solid #2b2b2b;*/ 
      border-left: 1px solid #2b2b2b; 
      border-right: 1px solid #000; 
      border-bottom: 1px solid #000; 
      background: url('img/boxes_background_color_1x1.png') repeat transparent; 
     } 

    </style> 
    <script> 
     var newBg = ['img/fond1.png', 'img/fond2.png', 'img/fond3.png']; 
     var i = 0; 
     var rotateBg = setInterval(function(){ 
      if(i==3) 
       i=0; 
      else 
       i++; 
      $('body').css({backgroundImage : 'url(' + newBg[i] + ')'}); 
     }, 10000); 
    </script> 
</head> 

<body> 
    <div class="container-fluid" > 

     <div class="row-fluid"> 
      <div class="span2"> 
       <!-- espaciador izquierda --> 
      </div> 
      <div class="span8 blackbox"> 
       <div class="span12" > 
        <img src="img/logo glx.png" /> 
        <div class="row-fluid"> 
         <div class="span12"> 
          <div class="navbar navbar-inverse"> 
           <div class="navbar-inner"> 
            <div class="container"> 

             <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
             <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
              <span class="icon-bar"></span> 
              <span class="icon-bar"></span> 
              <span class="icon-bar"></span> 
             </a> 

             <!-- Be sure to leave the brand out there if you want it shown --> 
             <a class="brand" href="#">Project name</a> 

             <!-- Everything you want hidden at 940px or less, place within here --> 
             <div class="nav-collapse collapse"> 
              asdfasdfad 
             </div> 

            </div> 
           </div> 
          </div> 
         </div> 

        </div> 

       </div> 
      </div> 
      <div class="span2"> 
       <!-- espaciador derecha --> 
      </div> 
     </div> 
    </div> 


</body>

Source

2013-03-14 Fo Nko

Il; s beaucoup plus facile d'avoir vos antécédents déclarés en CSS et échanger juste le nom de la classe sur la balise BODY. –

ce que @tcovo a déclaré.

Sauf que je le ferais comme ceci:

i++; 
if (i > 2){ 
    i = 0; 
} 
$('body').css({backgroundImage : 'url(' + newBg[i] + ')'});

Source

2013-03-14 18:43:21 Bill

if(i==3) 
     i=0; 
    else 
     i++; 
    $('body').css({backgroundImage : 'url(' + newBg[i] + ')'});

Et si j'est égal à 2 lorsque ce code est exécuté? Il est incrémenté à 3, puis il est utilisé dans newBg[i], ce qui provoque l'accès non désiré de newBg[3]. Vous pouvez le réparer en remplaçant le if-else par i = (i+1) % 3; (le % utilisé ici est appelé l'opérateur modulo).

Source

2013-03-14 18:41:52 tcovo

Désolé pour hors sujet, mais pouvez-vous expliquer les maths derrière le remplacement de l'if-else par 'i = (i + 1)%;' s'il vous plaît? – Bill

@BillyMathews ne sais pas si je peux expliquer dans cet espace; voir http://en.wikipedia.org/wiki/Modulo_operation. En programmation, il peut être utilisé pour faire un "enroulement" autour d'un nombre donné (plage de 0 à n-1). Exemples: '2% 3 == 2',' 3% 3 == 0', '4% 3 == 1' – tcovo

Merci, bravo ^. ^ – Bill

changer l'image de fond jquery

Répondre

Questions connexes