Попробовал сделать слайдер своими руками, так как надо было запихать в него немного специфики. В принципе все получилось, но осталась одна проблема.
Когда сайт открыт и ты находишься на нем все замечательно. Но стоит перейти на другую вкладку и там пробыть какое то время, за которое слайдер сделает цикл и вернутся обратно на сайт, как слайдер начинает вываливать на тебя всю пропущенную тобой анимацию. выглядит это не очень приятно и мыслей как от этого избавится честно говоря никаких.
ХТМЛ и JS данного чуда я привожу ниже. эту конструкцию в действии можно посмотреть
тут.
С удовольствие выслушаю мысли по поводу моей проблемы и вообще того что я натворил в данной конструкции.
function sliders(){
setTimeout("chenge_image()",time_interval);
setTimeout("chenge_image()",time_interval*2);
}
function chenge_image_block(){
menu_slider.css('background','url(/images/up_top_bg.jpg) repeat-x left top');
menu_slider = menu_slider.next()
menu_slider.css('background','url(/images/up_top_bg_hv.jpg) repeat-x left top');
main_slider.fadeOut();
main_slider = main_slider.next();
setTimeout("main_slider.fadeIn()", 420);
if(s == 3 && i == 1){
sliders();
menu_slider.css('background','url(/images/up_top_bg.jpg) repeat-x left top');
menu_slider = $(".top_menu_index li:first");
menu_slider.css('background','url(/images/up_top_bg_hv.jpg) repeat-x left top');
}
if(s == 2){
activ_image = $('.slide_image:first');
$('.slide_image').css('display','none');
$('.slide_image:first').css('display','block');
i = 1;
}
if(s == 3){
main_slider = $('.slider_index_page:first');
s = 0;
}
s++;
}
$(document).ready(function(){
activ_image = $('.slide_image:first');
main_slider = $('.slider_index_page:first');
menu_slider = $(".top_menu_index li:first");
temp_hover = '';
time_interval = 3500;
time_slaide = 12000;
i=1;
s=1;
pause_cheker = true;
sliders();
intervalID = setInterval("chenge_image_block()",time_slaide);
menu_slider.css('background','url(/images/up_top_bg_hv.jpg) repeat-x left top');
$(".top_menu_index li").hover(function(){
temp_hover = $(this).css('background');
$(this).css('background','url(/images/up_top_bg_hv.jpg) repeat-x left top')
},
function(){
$(this).css('background', temp_hover)
}
);
$(".top_menu_index li").click(function(){
$('.slide_image').css('display','none');
//включение нужной кнопки
$(".top_menu_index li").css('background','url(/images/up_top_bg.jpg) repeat-x left top');
$(this).css('background','url(/images/up_top_bg_hv.jpg) repeat-x left top');
temp_hover = 'url(/images/up_top_bg_hv.jpg) repeat-x left top';
//сбор и новый старт счетчика
clearInterval(intervalID);
if(pause_cheker){
pause_cheker = false;
setTimeout(function(){
intervalID = setInterval("chenge_image_block()",time_slaide);
pause_cheker = true;
}, 10000);
}
//замена головного блока
$(".slider_index_page").fadeOut();
button_id = $(this).attr('id');
if(button_id == 'pervii'){
setTimeout("$('#first').fadeIn()", 420);
$('.slide_image:first').css('display','block');
sliders();
}
else if(button_id == 'vtoroi'){
setTimeout("$('#second').fadeIn()", 420);
}
else if(button_id == 'tretii'){
setTimeout("$('#thirst').fadeIn()", 420);
}
});
});
<div id="image_block">
<ul class="top_menu_index">
<li id="pervii" style="background: url("/images/up_top_bg.jpg") repeat-x scroll left top transparent;">ISO сертификация</li>
<li id="vtoroi" style="background: url("/images/up_top_bg_hv.jpg") repeat-x scroll left top transparent;">CPO сертификаты</li>
<li id="tretii" style="background: url("/images/up_top_bg.jpg") repeat-x scroll left top transparent;">Строительные товары</li>
</ul>
<div class="clear"></div>
<div id="first" class="slider_index_page" style="display: none;">
<div id="text_image">
<p>1 text.</p>
<a href=""><div id="button_image">Узнать больше</div></a>
</div>
<img src="/assets/images/iso14001.jpg" class="slide_image" style="display: none;">
<img src="/assets/images/ohsas.jpg" style="display: none;" class="slide_image">
<img src="/assets/images/iso9001.jpg" style="" class="slide_image">
<div class="clear"></div>
</div>
<div style="display: block;" id="second" class="slider_index_page">
<div id="text_image">
<p>2 text.</p>
<a href=""><div id="button_image">Узнать больше</div></a>
</div>
<img src="/assets/images/sro.jpg">
<div class="clear"></div>
</div>
<div style="display: none;" id="thirst" class="slider_index_page">
<div id="text_image">
<p>3 text.</p>
<a href=""><div id="button_image">Узнать больше</div></a>
</div>
<img src="/assets/images/stroy.jpg">
<div class="clear"></div>
</div>
</div>
