Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.11.2017, 12:21
Аспирант
Отправить личное сообщение для jabbascript Посмотреть профиль Найти все сообщения от jabbascript
 
Регистрация: 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)
Ответить с цитированием
  #2 (permalink)  
Старый 27.11.2017, 12:48
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

jabbascript,
А какая связь между вашим setInterval, groupN и массивами с картинками? По приведенным скриптам - никакой.
На основании чего вычислять delay?
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2017, 13:07
Аспирант
Отправить личное сообщение для jabbascript Посмотреть профиль Найти все сообщения от jabbascript
 
Регистрация: 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.
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2017, 13:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от jabbascript
Как только у группы появляется класс active т е .has('active') я беру длину массива номер 1 на основании этого задаю delay и прокручиваю в группе картинки, delay прошел и класс active улетел на 2ю группу там определил длину массива 2 и на данном основании задал delay и тд.

Типа о array.length = 5, значит умножим на 1000 следовательно delay = 5000 для первой группы и тп.
Значит, у вас все готово? Тогда в чем проблема?
Ответить с цитированием
  #5 (permalink)  
Старый 27.11.2017, 13:19
Аспирант
Отправить личное сообщение для jabbascript Посмотреть профиль Найти все сообщения от jabbascript
 
Регистрация: 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.
Ответить с цитированием
  #6 (permalink)  
Старый 27.11.2017, 14:08
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

jabbascript,
Насколько я понял, вы показываете в группах картинки по одной. Непонятно, зачем у вас три группы и три массива - достаточно одной группы, и показывайте картинки с задержкой 1000
Ответить с цитированием
  #7 (permalink)  
Старый 27.11.2017, 14:41
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 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>
Ответить с цитированием
  #8 (permalink)  
Старый 27.11.2017, 14:50
Аспирант
Отправить личное сообщение для jabbascript Посмотреть профиль Найти все сообщения от jabbascript
 
Регистрация: 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ва у которой свои картинки и тд, а еще я могу группы переключать, но тут не про переключение групп это фигня.
Ответить с цитированием
  #9 (permalink)  
Старый 27.11.2017, 14:59
Аспирант
Отправить личное сообщение для jabbascript Посмотреть профиль Найти все сообщения от jabbascript
 
Регистрация: 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)
Ответить с цитированием
  #10 (permalink)  
Старый 27.11.2017, 15:10
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

jabbascript,
Зачем группы переключать? Показывайте все в одной группе, переключайте массивы. Удобнее сделать двумерный массив.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
HTA-приложение для радио Pianorama Magneto Ваши сайты и скрипты 42 22.01.2012 08:34
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31