joejoker
20.07.2012, 18:49
Доброго времени суток всем форумчанам. Нужен Ваш совет. Я никак не могу разобраться где поселился баг. Сам только начинаю изучать jquery и вообще js. В общем проблема в следующем. Есть сайт в разработке: http://7.osp.z8.ru/. Там на главной странице слайдер, который работает нормально, но нужно было организовать смену фона синхронно со слайдером. Решил не мудрствовать лукаво, и при инициализации написал примерно следующее: $(function(){
$("div.slider").carousel({
loop: true,
autoSlide: true,
autoSlideInterval: 5000,
callback: function(){
var left = $('div.slider ul').css('left');
var str = left.substring(1);
var div = $('.cristall');
if(div.hasClass('bg_body1')){
div.removeClass('bg_body1');
}else if(div.hasClass('bg_body2')){
div.removeClass('bg_body2');
}else if(div.hasClass('bg_body3')){
div.removeClass('bg_body3');
}else if(div.hasClass('bg_body4')){
div.removeClass('bg_body4');
}
if(str == 'px'){
var cls = 'bg_body1';
}else if(str == '1000px'){
var cls = 'bg_body2';
}else if(str == '2000px'){
var cls = 'bg_body3';
}else if(str == '3000px'){
var cls = 'bg_body4';
}
div.addClass(cls);
}
});
});
Понимаю что реализация убогая, но я нуб в js, потому и прошу совета. В общем как все это работает, устраивает до тех пор, пока не начинаешь клацать по кнопкам. Ели кликнуть по кнопке, которая листает слайдер в обратном направлении, то слайдер двигается назад, а вот класс диву присваивается такой, как будто он двигается вперед. Причем, так происходит только при первом клике по кнопке. В результате получается несоответствие картинок в слайдере и бекграунде.
Обьясните дураку, как надо сделать или в чем причина такого поведения, буду очень признателен.
$("div.slider").carousel({
loop: true,
autoSlide: true,
autoSlideInterval: 5000,
callback: function(){
var left = $('div.slider ul').css('left');
var str = left.substring(1);
var div = $('.cristall');
if(div.hasClass('bg_body1')){
div.removeClass('bg_body1');
}else if(div.hasClass('bg_body2')){
div.removeClass('bg_body2');
}else if(div.hasClass('bg_body3')){
div.removeClass('bg_body3');
}else if(div.hasClass('bg_body4')){
div.removeClass('bg_body4');
}
if(str == 'px'){
var cls = 'bg_body1';
}else if(str == '1000px'){
var cls = 'bg_body2';
}else if(str == '2000px'){
var cls = 'bg_body3';
}else if(str == '3000px'){
var cls = 'bg_body4';
}
div.addClass(cls);
}
});
});
Понимаю что реализация убогая, но я нуб в js, потому и прошу совета. В общем как все это работает, устраивает до тех пор, пока не начинаешь клацать по кнопкам. Ели кликнуть по кнопке, которая листает слайдер в обратном направлении, то слайдер двигается назад, а вот класс диву присваивается такой, как будто он двигается вперед. Причем, так происходит только при первом клике по кнопке. В результате получается несоответствие картинок в слайдере и бекграунде.
Обьясните дураку, как надо сделать или в чем причина такого поведения, буду очень признателен.