[JavaScript] Zatrzymanie animacji po najechaniu myszą Opcje

[php11]

Moi drodzy,

jak zatrzymać animację, gdy najadę myszą na element?

[PHP] pobierz, plaintext 
var slides = document.querySelectorAll('.mojSlider li');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
 
function nextSlide(){
	slides[currentSlide].className = 'slajd';
	currentSlide = (currentSlide+1)%slides.length;
	slides[currentSlide].className = 'slajd aktywny';
}
[PHP] pobierz, plaintext 

To powinno zadziałać, ale nie potrafię prawidłowo umieścić w moim kodzie

[PHP] pobierz, plaintext 
$(function() {
    $('marquee').mouseover(function() {
        $(this).attr('scrollamount',0);
    }).mouseout(function() {
         $(this).attr('scrollamount',5);
    });
});
[PHP] pobierz, plaintext 

[mortus]

Trzeba dodać onmouseover i onmouseout eventhandler do każdego slide'u. Pierwszy czyści slideInterval, a drugi ponownie go ustawia. Przykład dla elementów li posiadających klasę slajd:

[JAVASCRIPT] pobierz, plaintext 
var interval = setInterval(moveSlide, 3000);
var slides = document.getElementsByClassName("slajd");
for (var i = 0; i < slides.length; i++) {
  slides[i].onmouseover = stopSlider;
  slides[i].onmouseout = startSlider;
}
function startSlider() {
  console.log("Runned");
  interval = setInterval(moveSlide, 3000);	
}
function stopSlider() {
  console.log("Stopped");
  clearInterval(interval);
}
function moveSlide() {
  console.log("Moved to next slide");
}
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował mortus 1.05.2017, 13:39:01

[trueblue]

Kod

document.querySelector('.mojSlider').addEventListener('mouseenter',function(){
    clearInterval(slideInterval);
});
document.querySelector('.mojSlider').addEventListener('mouseleave',function(){
    slideInterval = setInterval(nextSlide,2000);
});

lub definiujesz zmienną paused (początkowo false). Przy mouseover paused=true, przy mouseleave paused=true. W funkcji nextSlide sprawdzenie czy paused jest true.

Ten post edytował trueblue 1.05.2017, 16:19:12