jQuery 코드가 올바르게 작동하지 않습니다.

Question

$(function() { 

    var width = 720; 
    var animationSpeed = 1000; 
    var imgTime = 3000; 
    var currentSlide = 1; 

    var $slideCont = $('.slide-container'); 
    var $slides = $slideCont.find('.slides'); 
    var $slide = $slides.find('.slide'); 

    var interval; 

    function startSlider() { 
    var interval = setInterval(function() { 
     $slides.animate({marginLeft: '-='+width}, animationSpeed, function() { 
     currentSlide++; 
     if (currentSlide === $slide.length) { 
      currentSlide = 1; 
      $slides.css({marginLeft: 0}); 
     }; 
     }); 
    },imgTime); 
    }; 

    function stopSlider() { 
    clearInterval(interval); 
    }; 

    $slideCont.on('mouseenter', stopSlider).on('mouseleave', startSlider); 
}); 

슬라이드 쇼, 애니메이션이 절대 작동하지만 괜찮습니다. 그러나 커서가 그림 위에 있으면 애니메이션이 일시 중지되고 내 coursor가 다시 시작될 때 원합니다. 거의 작동 중입니다 ...하지만 페이지를 새로 고침 할 때 (사진에 마우스를 대고 떠날 때) 커서가 켜져 있으면 일시 중지되지 않습니다.

도움 주셔서 감사합니다.

Answer 1

나는 그냥 같은, 어딘가 startSlider를 호출해야한다고 생각 : 당신의 자바 스크립트에

$(function() { 

    var width = 720; 
    var animationSpeed = 1000; 
    var imgTime = 3000; 
    var currentSlide = 1; 

    var $slideCont = $('.slide-container'); 
    var $slides = $slideCont.find('.slides'); 
    var $slide = $slides.find('.slide'); 

    var interval; 

    function startSlider() { 
    var interval = setInterval(function() { 
     $slides.animate({marginLeft: '-='+width}, animationSpeed, function() { 
     currentSlide++; 
     if (currentSlide === $slide.length) { 
      currentSlide = 1; 
      $slides.css({marginLeft: 0}); 
     }; 
     }); 
    },imgTime); 
    }; 

    function stopSlider() { 
    clearInterval(interval); 
    }; 

    $slideCont.on('mouseenter', stopSlider).on('mouseleave', startSlider); 
    startSlider(); 
}); 

Answer 2

전화 startSlider()합니다. 요소에서 mouseleave가 감지 될 때까지 함수가 시작되지 않으므로 슬라이드 쇼가 페이지로드시 시작되지 않습니다.

마우스 오버시에는 멈추지 않습니다. 상단에있는 interval을 사용하는 대신 startSlider() 함수에서 새로운 interval 변수를 만듭니다.

이렇게 수정하면 제대로 작동합니다.

function startSlider() { 
    interval = setInterval(function() { 
     $slides.animate({marginLeft: '-='+width}, animationSpeed, function() { 
     currentSlide++; 
     if (currentSlide === $slide.length) { 
      currentSlide = 1; 
      $slides.css({marginLeft: 0}); 
     }; 
     }); 
    },imgTime); 
    };'