Image Slider Issue

Question

Итак, у меня есть функциональный слайдер изображения, которым я полностью горжусь, но я не могу повторить цикл, когда цикл останавливается. То, что у меня сейчас есть, это то, что он петли сам по себе, и когда мышь нависает над ним, цикл останавливается. Но я хочу, чтобы цикл продолжался, когда мышь не зависала над ним (контейнером), используя eventListener «mouseout». Вы можете мне помочь?

window.onload = function() { 
     var nmbr_imgs = 4; 
     var imgs_holder = ["IMGS/Actinium.png", "IMGS/Aluminum.png", "IMGS/Astatine.png", "IMGS/Barium.png"]; 
     var total = imgs_holder.length; 
     var left_btn = document.getElementById('left_btn'); 
     var right_btn = document.getElementById('right_btn'); 
     var imgs_display = document.getElementById('imgs_display'); 

     left_btn.addEventListener('click', function() { 
      total = total - 1; 
      imgs_display.src = imgs_holder[total]; 
      if (total < 0) { 
       total = nmbr_imgs - 1; 
       imgs_display.src = imgs_holder[(total)]; 
      } 
     }, false); 

     right_btn.addEventListener('click', function() { 
      total = total + 1; 
      imgs_display.src = imgs_holder[total]; 
      if (total > (nmbr_imgs - 1)) { 
       total = 0; 
       imgs_display.src = imgs_holder[total]; 
      } 
     }, false); 

     var img_change = setInterval(function() { 
      total = total + 1; 
      imgs_display.src = imgs_holder[total] 

      if (total > (nmbr_imgs - 1)) { 
       total = 0; 
       imgs_display.src = imgs_holder[total]; 
      } 

      var container = document.getElementById('container'); 
      container.addEventListener('mouseover', function() { 
       clearInterval(img_change); 
      }, false); 

      container.addEventListener('mouseout', img_change, false); 
     }, 1000); 
    } 

Answer 1

Что вы делаете, это хранить в img_change идентификатор интервала (который вы позже используете для очистки интервала). Однако, когда вы добавляете событие mouseout, вы передаете тот же ID, что и функция, выполняемая (что не имеет никакого смысла). Вы могли бы попробовать что-то вроде этого:

Update

Как любезно кто-то указал, вы можете избежать повторения кода легко:

var func = function() { 
    total = total + 1; 
    imgs_display.src = imgs_holder[total] 

    if (total > (nmbr_imgs - 1)) { 
     total = 0; 
     imgs_display.src = imgs_holder[total]; 
    } 

}; 
var img_change = setInterval(func, 1000); 

var container = document.getElementById('container'); 

container.addEventListener('mouseover', function() { 
    clearInterval(img_change); 
}, false); 

container.addEventListener('mouseout', function() { 
    img_change = setInterval(func, 1000); 
}, false); 

Here's the new fiddle

С уважением.

Answer 2

setInterval и setTimeout Вернуть string. Они не являются функцией ссылки. Когда эта строка передается в clearTimeout или clearInterval, интервал или таймаут останавливаются и удаляются. Для перезагрузки вам нужно переопределить интервал/время ожидания.

Обновить это. Теперь установщик интервалов завернут в функцию, которая немедленно вызвана. Когда пользователь делает подсказку, он снова вызывает startLoop, тем самым восстанавливая интервал.

function startLoop() 
    { 
     img_change = setInterval(function() { 
     total = total + 1; 
     imgs_display.src = imgs_holder[total]; 

     if (total > (nmbr_imgs - 1)) { 
      total = 0; 
      imgs_display.src = imgs_holder[total]; 
     } 

     }, 1000); 


    } 

    var container = document.getElementById('container'); 
    container.addEventListener('mouseout', startLoop, false); 

    container.addEventListener('mouseover', function() { 
      clearInterval(img_change); 
     }, false); 

    startLoop();