jquery слайдер, анимация при переключении вкладки
Попробовал сделать слайдер своими руками, так как надо было запихать в него немного специфики. В принципе все получилось, но осталась одна проблема.
Когда сайт открыт и ты находишься на нем все замечательно. Но стоит перейти на другую вкладку и там пробыть какое то время, за которое слайдер сделает цикл и вернутся обратно на сайт, как слайдер начинает вываливать на тебя всю пропущенную тобой анимацию. выглядит это не очень приятно и мыслей как от этого избавится честно говоря никаких. ХТМЛ и 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> |
|
Часовой пояс GMT +3, время: 20:04. |