Здравствуйте!!!
Подскажите пожалуйста, как можно реализовать динамический delay. Я хочу что бы delay брал длину массива картинок и умножал на 1000, это будет время необходимое для прокрутки всех изображений внутри группы, но так как таких групп 3 и в каждой разное кол-во изображений нужна динамика.
Сейчас класс актив присваивается группам строго по установленному delay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>timer</title>
<style>
.group1,
.group2,
.group3{
position: absolute;
z-index: 9;
}
</style>
</head>
<body>
<div class="group1">
</div>
<div class="group2">
</div>
<div class="group3">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
var array = ["1.jpg","2.jpg","3.jpg","4.jpg"].reverse(),
array2 = ["1.jpg","2.jpg","3.jpg"].reverse(),
array3 = ["1.jpg","2.jpg"].reverse(),
delay = 4000,
group1 = $('.group1'),
group2 = $('.group2'),
group3 = $('.group3'),
currentIndex = 0,
el = 0;
setInterval(function() {
console.log(currentIndex);
if (currentIndex == 0) {
group2.removeClass('active');
group3.removeClass('active');
group1.addClass('active');
currentIndex++;
}else if(currentIndex == 1){
group1.removeClass('active');
group3.removeClass('active');
group2.addClass('active');
currentIndex++;
}else if(currentIndex == 2){
group2.removeClass('active');
group1.removeClass('active');
group3.addClass('active');
currentIndex = 0;
}
}, delay)