Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2011, 13:42
Новичок на форуме
Отправить личное сообщение для KiTaeZa Посмотреть профиль Найти все сообщения от KiTaeZa
 
Регистрация: 19.12.2008
Сообщений: 2

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(&quot;/images/up_top_bg.jpg&quot;) repeat-x scroll left top transparent;">ISO сертификация</li>
                          		<li id="vtoroi" style="background: url(&quot;/images/up_top_bg_hv.jpg&quot;) repeat-x scroll left top transparent;">CPO сертификаты</li>
                          		<li id="tretii" style="background: url(&quot;/images/up_top_bg.jpg&quot;) 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>
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2011, 20:52
Аватар для doniv
Аспирант
Отправить личное сообщение для doniv Посмотреть профиль Найти все сообщения от doniv
 
Регистрация: 02.03.2010
Сообщений: 73

Столкнулся с той же проблемой.

Решение: Баг со сменой окна.

Последний раз редактировалось doniv, 05.09.2011 в 22:19.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JQuery, анимация для нескольких элементов сразу, возможно ли? Logo jQuery 21 29.05.2012 21:50
mini slider - jquery (Слайдер) igsavenko Общие вопросы Javascript 0 05.05.2011 20:42
выборка идентификатора при помощи jQuery из цикла PHP... xormax jQuery 4 27.04.2011 13:59
ajax tabs + form сбрасывание формы при переключении Tchort AJAX и COMET 1 04.12.2010 19:54
jQuery UI datepicker -- не биндится при загрузке mkrylov jQuery 4 20.05.2009 20:36