Bootstrap Карусель + jquery
 

Всем привет!
никак не могу решить одну проблему. Когда карусель меняет картинку на сайте, то 2 блока дива должны менять цвет.. Проблема в том, что когда картинки идут по новому циклу( второй раз), то цвет дивов не меняется больше, а остается ченым... как решить проблему?

var timer0 = setInterval(function firstimg() {
  if($('img[alt="pikachu"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: 'red' }, 1000 )
    clearInterval(timer0)
}
}, 0);

var timer1 = setInterval(function secondimg() {
  if($('img[alt="pokemons"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: 'blue' }, 1000 )
    clearInterval(timer1)
  }
  }, 0);

var timer2 = setInterval(function thirdimg() {
  if($('img[alt="baltau"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: 'white' }, 1000 )
    clearInterval(timer2)
  }
  }, 0);

var timer3 = setInterval(function lastimg() {
  if($('img[alt="pokemons4"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: 'black' }, 1000 )
    clearInterval(timer3)
  }
  }, 0);

Так работает идеально, до тех пор пока не нажимаешь alt+tab, то есть переходишь в другую программу. После этого все сбивается и опять не работает.. видимо это из-за того,что сбивается время срабатывания..

var timer0 = setTimeout(function firstimg() {
  if($('img[alt="pikachu"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: '#E8D658' }, 1000 )
    timer0 = setTimeout(firstimg, 20000);  
  }}, 200);

var timer1 = setTimeout(function secondimg() {
  if($('img[alt="pokemons"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: '#ffffff' }, 1000 )
    timer1 = setTimeout(secondimg, 20000);   
  }}, 5200 );

var timer2 = setTimeout(function thirdimg() {
  if($('img[alt="baltau"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: '#3675A1' }, 1000 )
  timer2 = setTimeout(thirdimg, 20000);
  }}, 10200);

var timer3 = setTimeout(function lastimg() {
  if($('img[alt="pokemons4"]').is(':visible')) {
    $('.menu, .header_topline').animate({ backgroundColor: '#CA1E46' }, 1000 )
    timer3 = setTimeout(lastimg, 20000);
  }}, 15200);

так в карусель и ставьте смену цвета и выкиньте все таймеры

я бы с удовольствием это сделал бы, если бы понимал как это реализовать правильно..

jojocague,

$(function() {
$('#myCarousel').on('slid.bs.carousel', function (e) {
var i = $('#myCarousel li.active').index("#myCarousel li");
$('.menu, .header_topline').stop().animate({ backgroundColor: ['#E8D658','#ffffff','#3675A1','#CA1E46'][i] }, 1000 )
})
});

один только вопрос.. Как вы нашли это событие и поняли, что оно надо для триггера?

jojocague,
http://bootstrap-3.ru/javascript.php