Баг с прокруткой, при смени вкладки

@Zubonick · Регистрация: 04.05.2018

Студворк — интернет-сервис помощи студентам

Есть скрипт карусели.Суть проблемы в том что если перейти на любую другую вкладку в браузере, а вкладку со скриптом не закрывать то когда возвращаешься на вкладку со скриптом он начинает супер быстро пролистывать блоки как будто догонят то время которые ты проводил на второй вкладке.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="carousel"> 
  <div class="carousel-button-left"><a href="#"></a></div> 
  <div class="carousel-button-right"><a href="#"></a></div> 
    <div class="carousel-wrapper"> 
       <div class="carousel-items"> 
          <div class="carousel-block">
                <img src="images/1.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/2.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/3.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/4.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/5.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/6.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/7.jpg" alt="" />
          </div>            
          <div class="carousel-block"> 
                <img src="images/8.jpg" alt="" />
          </div>
       </div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
   .carousel  {
       max-width: 1080px; 
       margin: 50px auto;
       width:100%;
    }
    .carousel-wrapper {
       margin: 10px 30px; 
       overflow: hidden;
       position:relative;
    }
    .carousel-items {
       width: 10000px;
       position: relative; 
    }
    .carousel-block {
       float: left; 
       width: 250px; 
       padding: 10px 10px 10px 0px; 
    }
    .carousel-block img{
        display:block;
    }
    .carousel-button-left a, .carousel-button-right a{
       width: 25px; 
       height: 36px; 
       position: relative;
       top: 80px; 
       cursor: pointer; 
       text-decoration:none;
    }
    .carousel-button-left a{
       float: left; 
       background: url(../images/carousel-left.png); 
    }
    .carousel-button-right a{
       float: right;
       background: url(../images/carousel-right.png); 
    }

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//Обработка клика на стрелку вправо
    $(document).on('click', ".carousel-button-right",function(){ 
        var carusel = $(this).parents('.carousel');
        right_carusel(carusel);
        return false;
    });
    //Обработка клика на стрелку влево
    $(document).on('click',".carousel-button-left",function(){ 
        var carusel = $(this).parents('.carousel');
        left_carusel(carusel);
        return false;
    });
    function left_carusel(carusel){
       var block_width = $(carusel).find('.carousel-block').outerWidth();
       $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items")); 
       $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
       $(carusel).find(".carousel-items .carousel-block").eq(-1).remove();    
       $(carusel).find(".carousel-items").animate({left: "0px"}, 200); 
 
    }
    function right_carusel(carusel){
       var block_width = $(carusel).find('.carousel-block').outerWidth();
       $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
          $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items")); 
          $(carusel).find(".carousel-items .carousel-block").eq(0).remove(); 
          $(carusel).find(".carousel-items").css({"left":"0px"}); 
       }); 
    }
 
    $(function() {
         auto_right('.carousel:first');
    })
 
    // Автоматическая прокрутка
    function auto_right(carusel){
        setInterval(function(){
            if (!$(carusel).is('.hover'))
                right_carusel(carusel);
        }, 1000)
    }
    // Навели курсор на карусель
    $(document).on('mouseenter', '.carousel', function(){$(this).addClass('hover')})
    //Убрали курсор с карусели
    $(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')})

@Evgen1337 · 11.12.2018, 17:25

Надо, чтобы когда таб был не активен, отключать выполнение скрипта, завести булевскую переменную... или ... )
https://stackoverflow.com/ques... -is-active

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	11.12.2018, 17:25
	Надо, чтобы когда таб был не активен, отключать выполнение скрипта, завести булевскую переменную... или ... ) https://stackoverflow.com/ques... -is-active 1