изменить фоновое изображение jquery

так что я пытаюсь повернуть фоновое изображение из набора из трех изображений, которые у меня есть. Я понял способ сделать это, но здесь происходит что-то страшное. Из приведенного ниже примера вы должны получить i = 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

Это, с намного легче иметь ваши фоны объявлены в CSS и просто поменять имя класса в теге BODY. –

что @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]. Вы можете исправить это, заменив if-else i = (i+1) % 3; (используемый здесь % называется оператором modulo).

источник

2013-03-14 18:41:52 tcovo

Извините за неточную тему, но можете ли вы объяснить математику за заменой if-else на 'i = (i + 1)%;' пожалуйста? – Bill

@BillyMathews не знаю, могу ли я объяснить в этом пространстве; см. http://en.wikipedia.org/wiki/Modulo_operation. В программировании его можно использовать для того, чтобы сделать число «обертывание» подходящим для заданного диапазона (диапазон от 0 до n-1). Примеры: '2% 3 == 2',' 3% 3 == 0', '4% 3 == 1' – tcovo

Спасибо, kudos ^. ^ – Bill

изменить фоновое изображение jquery

ответ

Смежные вопросы