改變背景圖像jquery

所以即時嘗試從我有一套三個圖像旋轉背景圖像。我想出了一個辦法來做到這一點，但在這裏發生了一些事情。從下面的例子你應該得到我= 0,1和2，但仍然達到價值3！而newBg [3]是未定義的！所以它保持10秒深藏不露改變背景圖像jquery

，你可以在這裏找到工作的例子：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>

來源

2013-03-14 Fo Nko

它; S輕鬆了許多在CSS中聲明瞭背景，只是交換對身體標記的類名。 – 2013-03-14 18:41:32

@tcovo說什麼。

除了我會做這樣的：

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

來源

2013-03-14 18:43:21 Bill

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

會發生什麼，如果執行該代碼時，我等於2？它會增加到3，然後在newBg[i]中使用，導致不需要的訪問newBg[3]。你可以通過用i = (i+1) % 3;替代if-else來修復它（這裏使用的%稱爲模運算符）。

來源

2013-03-14 18:41:52 tcovo

對不起主題，但你能解釋一下用'i =（i + 1）％;替換if-else後面的數學嗎？ – Bill 2013-03-14 23:43:55

@BillyMathews不知道我能否在這個空間裏解釋;請參閱http://en.wikipedia.org/wiki/Modulo_operation。在編程時，它可以用來編制一個數字「環繞」以適應給定範圍（範圍'0到n-1'）。例子：'2％3 == 2'，'3％3 == 0'，'4％3 == 1' – tcovo 2013-03-15 18:38:57

謝謝，榮譽^。^ – Bill 2013-03-15 21:46:12

改變背景圖像jquery

回答

相關問題