Самопроизвольное изменение интервала смены слайдов в слайдере на js с применением JQuery

366
18 декабря 2017, 15:41

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

Я уже задавал вопрос с данным кодом, но там не было кнопок слайда и связанных функций. Надо сказать, что такой ошибки не наблюдалось. Потому скидываю весь код.

Во время данной ошибки, виден один эффект, который может помочь. В норме сменяется слайд, сменяется активная кнопка. Во время данной ошибки, кнопка остается активной в течение 2-х циклов слайдера, в смысле в слайдере на 3 слайда (как здесь) сменяется 6 слайдов, и только потом следующая кнопка становится активной.

Кто знает, что это может быть, как тестировать данные ошибки, как исправить? Очень надо! Буду очень благодарен.

var slider = { 
  // Находит по class порядковый номер (Возьмет первую цифру в классе) 
  number: function(elem) { 
    return elem.attr('class').match(/\d+/g)[0] - 1; 
  }, 
 
  // Принимает данные: 
  // slider - слайдер, 
  // slide - элементы, которые будут "перемещаться", 
  // band - лента содержащая элементы, она на самом деле перемещается 
  // interval - интервал, через который будет меняться слайд, по умолчанию 3 секунды 
  init: function(slider, slide, band, interval) { 
 
    // Если не объявлен, выставляем по умолчанию 
    interval = (interval) ? interval : 3000; 
 
    // Находим нужные элементы 
    var buttons = $(slider).children(); 
    var slides = $(slide); 
    var film = $(band); 
 
    // Если не существует таких объектов, завершаем функцию 
    if (!buttons[0] && !slides[0] && !film[0]) { 
      return; 
    } 
 
    // Если количество кнопок и картинок не равно, завершаем функцию 
    if (buttons.length !== slides.length) { 
      return; 
    } 
 
    // Для перемещений, номер активной кнопки и элемента 
    var number = 1; 
 
    // Ловим контекст 
    var cnxFunc = this; 
 
    // При нажатии 
    buttons.click(function() { 
 
      // Находим номер кнопки и записываем, чтобы перемещалось с него 
      number = cnxFunc.number($(this)); 
 
      // Приводим в движение ленту 
      cnxFunc.mover(number, buttons, film, slides); 
    }); 
 
    // Повторяем через определенное время 
    setInterval(function() { 
 
      // Приводим в движение ленту 
      cnxFunc.mover(number, buttons, film, slides); 
 
      // Шагаем на следующую. Если дошли до конца, то начинаем сначала 
      (number === slides.length - 1) ? number = 0: number++; 
    }, interval); 
  }, 
 
  // number - номер активного слайда 
  // buttons - массив кнопок 
  // band - лента со слайдами 
  // slides - массив слайдов 
  mover: function(number, buttons, band, slides) { 
 
    // Класс активной кнопки, должен содержать "_active" 
    var activeClass = this.getActiveClass(buttons); 
 
    // Отступ 
    var shift = this.getShift(slides); 
 
    // Отрисовка стилей кнопок 
    this.renderStyleButtons(buttons, buttons.eq(number), activeClass); 
 
    // Анимированное перемещение 
    band.animate({ 
      left: -shift[number] 
    }, 500); 
  }, 
 
  // Отрисовка стилей кнопок 
  renderStyleButtons: function(buttons, button, activeClass) { 
    buttons.removeClass(activeClass); 
    button.addClass(activeClass); 
  }, 
 
  // Принимает массив слайдов, возвращает массив с отступами 
  getShift: function(slides) { 
 
    // Отступ 
    var shift = []; 
    shift[0] = 0; 
 
    // Присваиваем значения отступов для каждого слайда 
    for (var i = 0; i < slides.length - 1; i++) { 
      shift[i + 1] = shift[i] + slides.eq(i).width(); 
    } 
 
    return shift; 
  }, 
 
  // Принимает массив кнопок, возвращает класс делающий кнопку активной. 
  // Активный класс должен содержать "_active" 
  getActiveClass: function(buttons) { 
 
    for (var i = 0; i < buttons.length; i++) { 
      // Если классы данной кнопки содердет "_active", то 
      // Разбиваем класс по пробелу, и находим класс, содержащий "_active" 
      // Возвращаем этот класс 
      if (buttons.eq(i).attr('class').match(/_active(_)?/)) { 
 
        // Записываем все классы данной кнопки в виде массива 
        var classes = buttons.eq(i).attr('class').split(' '); 
 
        // Бежим по массиву классов, возвращаем класс, содержащий "_active" 
        for (var j = 0; j < classes.length; j++) { 
          if (classes[j].match(/_active(_)?/)) { 
            return classes[j]; 
          } 
        } 
 
      } 
    } 
  }, 
}; 
slider.init('.slider', '.slide', '.band')
.window { 
  position: relative; 
  width: 300px; 
  height: 185px; 
  background: #ccc; 
  font-size: 0; 
  overflow: hidden; 
} 
 
.band { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  white-space: nowrap; 
} 
 
.slide { 
  display: inline-block; 
  width: 100%; 
  height: 100%; 
} 
 
.slide_1 { 
  background: #fcf; 
} 
 
.slide_2 { 
  background: #cff; 
} 
 
.slide_3 { 
  background: #ffc; 
} 
 
.slider { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  z-index: 1; 
} 
 
.slider_button { 
  width: 15px; 
  height: 15px; 
  margin-right: 10px; 
  border-radius: 50%; 
  border: none; 
  cursor: pointer; 
  background: #88f; 
  outline: none; 
} 
 
.slider_button:hover { 
  background: #f88; 
} 
 
.slider_button_active { 
  background: #f88; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='window'> 
  <div class='slider'> 
    <button class='slider_id_1 slider_button slider_button_active'></button> 
    <button class='slider_id_2 slider_button'></button> 
    <button class='slider_id_3 slider_button'></button> 
  </div> 
  <div class='band'> 
    <div class='slide slide_1'></div> 
    <div class='slide slide_2'></div> 
    <div class='slide slide_3'></div> 
  </div> 
</div>

READ ALSO
передача данных с формы в pivot таблицу laravel

передача данных с формы в pivot таблицу laravel

Добрый день! Недавно начал изучать ларавел и возникла проблема (в интернете ничего подобного не нашел либо не правильно составлял запрос)...

277
Показ ячеек таблицы в зависимости от select

Показ ячеек таблицы в зависимости от select

Доброго времени сутокИмеется следующая динамическая таблица через php:

227
Пересылка файла

Пересылка файла

Нужно на Pythone (35) написать клиент отправляющий файл (example

226