27.11.2017, 12:21
|
|
Аспирант
|
|
Регистрация: 27.11.2017
Сообщений: 45
|
|
|
Динамический delay для таймера-планировщика
Здравствуйте!!! 
Подскажите пожалуйста, как можно реализовать динамический 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)
|
|
27.11.2017, 12:48
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
jabbascript,
А какая связь между вашим setInterval, groupN и массивами с картинками? По приведенным скриптам - никакой.
На основании чего вычислять delay?
|
|
27.11.2017, 13:07
|
|
Аспирант
|
|
Регистрация: 27.11.2017
Сообщений: 45
|
|
Сообщение от Dilettante_Pro
|
jabbascript,
А какая связь между вашим setInterval, groupN и массивами с картинками? По приведенным скриптам - никакой.
На основании чего вычислять delay?
|
Сейчас каждые 4 сек присваивается класс active одной из групп и так по кругу. Как только у группы появляется класс active т е .has('active') я беру длину массива номер 1 на основании этого задаю delay и прокручиваю в группе картинки, delay прошел и класс active улетел на 2ю группу там определил длину массива 2 и на данном основании задал delay и тд.
Типа о array.length = 5, значит умножим на 1000 следовательно delay = 5000 для первой группы и тп.
Выносящая мозг тема, я хочу понять как мне группы разделить по времени динамически.
Последний раз редактировалось jabbascript, 27.11.2017 в 13:13.
|
|
27.11.2017, 13:11
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Сообщение от jabbascript
|
Как только у группы появляется класс active т е .has('active') я беру длину массива номер 1 на основании этого задаю delay и прокручиваю в группе картинки, delay прошел и класс active улетел на 2ю группу там определил длину массива 2 и на данном основании задал delay и тд.
Типа о array.length = 5, значит умножим на 1000 следовательно delay = 5000 для первой группы и тп.
|
Значит, у вас все готово? Тогда в чем проблема? |
|
27.11.2017, 13:19
|
|
Аспирант
|
|
Регистрация: 27.11.2017
Сообщений: 45
|
|
|
Сообщение от Dilettante_Pro
|
|
Значит, у вас все готово? Тогда в чем проблема?
|
Нет не готово, сейчас delay 4000 для всех групп, ну у меня не получается именно переопределить delay, он какбы всегда 4000.
я не могу так сделать:
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, 27.11.2017 в 13:24.
|
|
27.11.2017, 14:08
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
jabbascript,
Насколько я понял, вы показываете в группах картинки по одной. Непонятно, зачем у вас три группы и три массива - достаточно одной группы, и показывайте картинки с задержкой 1000
|
|
27.11.2017, 14:41
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Не вполне понял, чего вы хотите... Как-то так?
<!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>
|
|
27.11.2017, 14:50
|
|
Аспирант
|
|
Регистрация: 27.11.2017
Сообщений: 45
|
|
|
Сообщение от Dilettante_Pro
|
Не вполне понял, чего вы хотите... Как-то так?
<!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>
|
Прикол в том что я хочу в каждой группе генерить свои картинки, для каждой группы есть свой массив. Получается групп1 показала свои картинки и переключилась на группу 2ва у которой свои картинки и тд, а еще я могу группы переключать, но тут не про переключение групп это фигня.
|
|
27.11.2017, 14:59
|
|
Аспирант
|
|
Регистрация: 27.11.2017
Сообщений: 45
|
|
Вот типа набросок, тут картинки вертятся в своей группе, можно переключать группы, но тут не плавно. Я хочу переделать это. Ну и тут с багами я просто набросал идею. Вот теперь мне нужен способ реализовать через динамический 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)
|
|
27.11.2017, 15:10
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
jabbascript,
Зачем группы переключать? Показывайте все в одной группе, переключайте массивы. Удобнее сделать двумерный массив.
|
|
|
|
