Динамический delay для таймера-планировщика
Здравствуйте!!!:thanks:
Подскажите пожалуйста, как можно реализовать динамический 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)
|
jabbascript,
А какая связь между вашим setInterval, groupN и массивами с картинками? По приведенным скриптам - никакой. На основании чего вычислять delay? |
Цитата:
Типа о array.length = 5, значит умножим на 1000 следовательно delay = 5000 для первой группы и тп. Выносящая мозг тема, я хочу понять как мне группы разделить по времени динамически. |
Цитата:
|
Цитата:
я не могу так сделать:
if(group1.hasClass('active')){
[B]delay = array.length * 1000;[/B] Так не работает
imgGroup1.attr({
src: 'img/g/' + array[el]
});
el++;
if (el >= array.length) {
el = 0;
currentIndex += 1;
}
}
Мне нужно както это обойти внутри setInterval delay = array.length * 1000; |
jabbascript,
Насколько я понял, вы показываете в группах картинки по одной. Непонятно, зачем у вас три группы и три массива - достаточно одной группы, и показывайте картинки с задержкой 1000 |
Не вполне понял, чего вы хотите... Как-то так?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>timer</title>
<style>
.group1{
position: absolute;
z-index: 9;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
var array = ["https://javascript.ru/cat/list/event.gif",
"https://javascript.ru/cat/list/donkey.gif",
"https://javascript.ru/cat/list/mobile.jpg",
"https://javascript.ru/cat/list/js.gif",
"https://javascript.ru/cat/list/event.gif",
"https://javascript.ru/cat/list/donkey.gif",
"https://javascript.ru/cat/list/mobile.jpg",
"https://javascript.ru/cat/list/event.gif",
"https://javascript.ru/cat/list/donkey.gif"].reverse(),
delay = 1000,
elem = $('.group1 img'),
currentIndex = 0;
var loop = setInterval(function() {
elem.attr("src",array[currentIndex]);
currentIndex++;
currentIndex = (currentIndex > array.length) ? 0:currentIndex;
console.log(currentIndex );
}, delay) ;
});
</script>
</head>
<body>
<div class="group1">
<img src = ""/>
</div>
</body>
</html>
|
Цитата:
|
Вот типа набросок, тут картинки вертятся в своей группе, можно переключать группы, но тут не плавно. Я хочу переделать это. Ну и тут с багами я просто набросал идею. Вот теперь мне нужен способ реализовать через динамический 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)
|
jabbascript,
Зачем группы переключать? Показывайте все в одной группе, переключайте массивы. Удобнее сделать двумерный массив. |
| Часовой пояс GMT +3, время: 15:04. |