Ошибка, которую сложно отловить. Если оставить вкладку с данным слайдером открытой, заниматься своими делами в браузере, а затем вернуться, можно обнаружить, что слайды сменяются без задержки, один за другим. Спустя какое-то время они вновь начинают сменятся согласно интервалу. Такое ощущение, словно браузер отсчитал, сколько должно было произойти смены слайдов и без остановки отсчитывает это количество. Я не знаю, что провоцирует данную ошибку, и сколько нужно ждать, всегда по-разному.
Я уже задавал вопрос с данным кодом, но там не было кнопок слайда и связанных функций. Надо сказать, что такой ошибки не наблюдалось. Потому скидываю весь код.
Во время данной ошибки, виден один эффект, который может помочь. В норме сменяется слайд, сменяется активная кнопка. Во время данной ошибки, кнопка остается активной в течение 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Добрый день! Недавно начал изучать ларавел и возникла проблема (в интернете ничего подобного не нашел либо не правильно составлял запрос)...
Доброго времени сутокИмеется следующая динамическая таблица через php: