Вот типа набросок, тут картинки вертятся в своей группе, можно переключать группы, но тут не плавно. Я хочу переделать это. Ну и тут с багами я просто набросал идею. Вот теперь мне нужен способ реализовать через динамический delay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>timer</title>
<style>
.group1,
.group2,
.group3{
/*display: none;*/
position: absolute;
}
.group1{
z-index: 9;
}
.group2{
z-index: 9;
}
.group3{
z-index: 9;
}
.active{
/*display: block;*/
z-index: 99;
}
.box1{
text-align: center;
width: 30px;
height: 200px;
background: #999;
position: absolute;
right: -30px;
}
.box2{
text-align: center;
width: 30px;
height: 200px;
background: #999;
position: absolute;
right: -60px;
}
.box3{
text-align: center;
width: 30px;
height: 200px;
background: #999;
position: absolute;
right: -90px;
}
.active .box1{
background: rgba(153,153,153, 0.5);
}
.active .box2{
background: rgba(153,153,153, 0.5);
}
.active .box3{
background: rgba(153,153,153, 0.5);
}
</style>
</head>
<body>
<div class="group1 active">
<div class="box1">
g <br>
n <br>
o <br>
m <br>
e <br>
</div>
<img src="" width="200" height="200" alt="img">
</div>
<div class="group2">
<div class="box2">
c <br>
a <br>
t <br>
</div>
<img src="" width="200" height="200" alt="img">
</div>
<div class="group3">
<div class="box3">
d <br>
o <br>
g <br>
</div>
<img src="" width="200" height="200" alt="img">
</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"];
var array2 = ["1.jpg","2.jpg","3.jpg"];
var array3 = ["1.jpg","2.jpg","3.jpg"];
var delay = 2000;
var group1 = $('.group1');
var imgGroup1 = $('.group1 img');
imgGroup1.attr({
src: 'img/g/' + array[0]
});
var group2 = $('.group2');
var imgGroup2 = $('.group2 img');
imgGroup2.attr({
src: 'img/c/' + array[0]
});
var group3 = $('.group3');
var imgGroup3 = $('.group3 img');
imgGroup3.attr({
src: 'img/d/' + array[0]
});
var currentIndex = 0;
var el = 0;
$('.box1').on('click', function(){
currentIndex = 0;
el = 0;
});
$('.box2').on('click', function(){
currentIndex = 1;
el = 0;
});
$('.box3').on('click', function(){
currentIndex = 2;
el = 0;
});
setInterval(function() {
if (currentIndex === 0) {
group2.removeClass('active');
group3.removeClass('active');
group1.addClass('active');
if(group1.hasClass('active')){
imgGroup1.attr({
src: 'img/g/' + array[el]
});
el++;
if (el >= array.length) {
el = 0;
currentIndex += 1;
}
}
}
if (currentIndex === 1) {
group1.removeClass('active');
group3.removeClass('active');
group2.addClass('active');
if(group2.hasClass('active')){
imgGroup2.attr({
src: 'img/c/' + array2[el]
});
el++;
if (el >= array2.length) {
el = 0;
currentIndex += 1;
}
}
}
if (currentIndex === 2) {
group2.removeClass('active');
group1.removeClass('active');
group3.addClass('active');
if(group3.hasClass('active')){
imgGroup3.attr({
src: 'img/d/' + array3[el]
});
el++;
if (el >= array3.length) {
el = 0;
currentIndex = 0;
}
}
}
}, delay)