setInterval: сбой при изменении задержки нажатием кнопки

Я реализую слайд-шоу изображений, используя чистый javascript, поэтому мне нужно решение только в javascript.setInterval: сбой при изменении задержки нажатием кнопки

У меня есть набор из 5 изображений, и я скрываю и показываю изображения с помощью setInterval.

У меня есть список выбора, который используется для изменения скорости изменения изображений, то есть задержки в setInterval.

Я почти осуществил слайд-шоу, но я испытываю сбой при изменении скорости смены изображений, и я не могу найти решение для запуска слайд-шоу на загрузке страницы.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style> 
    .item{ 
     width: 1024px; 
     height: auto; 
     display: none; 
    } 
    .active{ 
     width: 1024px; 
     height: auto; 
     display: block; 
    } 
    </style> 
</head> 
<body> 

    <select id="speedo"> 
     <option value="1">1 sec</option> 
     <option value="2">2 sec</option> 
     <option value="3">3 sec</option> 
     <option value="4">4 sec</option> 
     <option value="5">5 sec</option> 
    </select> 

    <div class="container"> 
     <img class="item" src="http://i58.tinypic.com/xp4isn.jpg" data-index='0'> 
     <img class="item" src="http://i59.tinypic.com/212u39z.jpg" data-index='1'> 
     <img class="item" src="http://i61.tinypic.com/63vbc2.jpg" data-index='2'> 
     <img class="item" src="http://i60.tinypic.com/wb2iaq.jpg" data-index='3'> 
     <img class="item" src="http://i60.tinypic.com/ejvqxe.jpg" data-index='4'> 
    </div> 

    <script> 
     var index=0; 
     var elemarray = document.querySelectorAll('.item'); 
     var speedElement = document.getElementById("speedo"); 
     window.delay = 1000; 

     speedElement.addEventListener('change',function(){ 
      if(timer) window.clearInterval(timer); 
      window.delay = parseInt(this.value)*1000; 
      var timer = setInterval("rotate()", window.delay); 
     }) 
     function rotate(){ 
      console.log(delay); 
      index++; 
      if(index==5) index = 0; 
      for(var i=0, len = elemarray.length; i<len; i++){ 
       (elemarray[i].getAttribute('data-index')==index)?elemarray[i].setAttribute('class','active') : elemarray[i].setAttribute('class','item'); 
      } 
     } 
    </script> 
</body> 
</html>

Вопрос 1. Как избавиться от сбоя?
Вопрос 2. Как начать слайд-шоу при загрузке страницы?

источник

2014-05-03 anurag

Какой у вас «глюк»? Пожалуйста, опишите вашу проблему точно – fjc

Не используйте 'setTimeout' и' setInterval' со строками, потому что это похоже на evil 'eval'! Вместо этого используйте функции: setTterval (rotate, window.delay) ' – Oriol

Задача 1) Необходимо инициализировать timer. Вы создаете его снова и снова. Вот откуда исходит ваш глюк.

Задача 2) Вам необходимо начать свой интервал.

Задача 3) Не использовать строковые функции внутри setInterval.

<select id="speedo"> 
    <option value="1" class="active">1 sec</option> 
    <option value="2">2 sec</option> 
    <option value="3">3 sec</option> 
    <option value="4">4 sec</option> 
    <option value="5">5 sec</option> 
</select> 

<div class="container"> 
    <img class="item" src="http://i58.tinypic.com/xp4isn.jpg" data-index='0'> 
    <img class="item" src="http://i59.tinypic.com/212u39z.jpg" data-index='1'> 
    <img class="item" src="http://i61.tinypic.com/63vbc2.jpg" data-index='2'> 
    <img class="item" src="http://i60.tinypic.com/wb2iaq.jpg" data-index='3'> 
    <img class="item" src="http://i60.tinypic.com/ejvqxe.jpg" data-index='4'> 
</div>

var timer = 0; 
var index = 0; 
var itemElements = document.querySelectorAll('.item'); 
var speedElement = document.getElementById("speedo"); 
var delay = 1000; 

speedElement.addEventListener('change',function() { 
    if(timer) { 
     window.clearInterval(timer); 
    } 
    delay = parseInt(this.value, 10) * 1000; 
    timer = setInterval(rotate, delay); 
}); 

function rotate() { 
    var len = itemElements.length; 
    index = (index + 1) % len; 
    for(var i=0; i<len; i++) { 
     if(itemElements[i].getAttribute('data-index') == index) { 
      itemElements[i].setAttribute('class','active'); 
     } else { 
      itemElements[i].setAttribute('class','item'); 
     } 
    } 
} 

timer = setInterval(rotate, delay);

JSFiddle: http://jsfiddle.net/4RtRV/2

источник

2014-05-03 20:30:05 Syntax

Я должен сказать, index = (index + 1)% 6; довольно умный. Спасибо за ответ! – anurag

@anurag, проблем нет. Обновленный мой ответ, чтобы использовать длину элементов элемента вместо жестко заданного значения, также зафиксировал базовый индекс (подумал, что это было 1!) – Syntax

Ваша переменная таймера объявлена внутри слушателя рамки, вы должны поместить его снаружи:

 var timer ; 
     speedElement.addEventListener('change',function(){ 
      changeTimer(this.value); 
     }) 
     changeTimer(1); 
     function changeTimer(val){ 
      if(timer) window.clearInterval(timer); 
      window.delay = parseInt(val)*1000; 
      timer = setInterval("rotate()", window.delay);   
     }

источник

2014-05-03 20:30:07 juvian

Спасибо, что именно была моя ошибка, я объявил таймер снаружи и вуаля ... он работает! ! ура – anurag

setInterval: сбой при изменении задержки нажатием кнопки

ответ

Смежные вопросы