jQuery在mouseenter和mouseout上暫停計時器不起作用

Question

我有這種自動更改圖像的工作，但綁定添加，所以它暫停懸停和重置時離開元素，但它繼續滾動，並不會暫停。我是JS和jQuery的新手。

JS

var galleryTimer; 
var galleryTimeOut = "2500"; 
    var galleryImage = ".productImage"; 

    // auto play function to go through images 
    function galleryPlay() { 
    $(galleryImage).each(function(index) { 
     var self = this 
     galleryTimer = setTimeout(function() { 
     $('.productImage').removeClass('active'); 
     $(self).addClass('active'); 
     }, index * galleryTimeOut); 
    }); 
    } 

    // pause when hovering main image and zooming image 
    function galleryPause() { 
    clearTimeout(galleryTimer); 
    } 

    // next function to move to next image 
    function galleryNext() { 

    } 

    // prev function to move back to prevous image 
    function galleryPrev() { 

    } 

    $(galleryImage).mouseenter(function() {    
    galleryPause();   
    }).mouseleave(function() {  
    galleryPlay(); 
    }); 

    $('.galleryNext').on('click', function(event){ 

    }); 

    $('.galleryPrev').on('click', function(event){ 

    }); 

    // auto start the auto play 
    galleryPlay(); 

HTML

<ul> 
    <li class="productImage active"> 
    <a><img src="http://placehold.it/350x350"></a> 
    </li> 
    <li class="productImage"> 
    <a><img src="http://placehold.it/350x350"></a> 
    </li> 
    <li class="productImage"> 
    <a><img src="http://placehold.it/350x350"></a> 
    </li> 
    <li class="productImage"> 
    <a><img src="http://placehold.it/350x350"></a> 
    </li> 
    <li class="productImage"> 
    <a><img src="http://placehold.it/350x350"></a> 
    </li> 
</ul> 
<a class="galleryNext">next</a> 
<a class="galleryPrev">next</a> 

Answer 1

你基本上有這個

var galleryTime; 
galleryTime = 1; 
galleryTime = 2; 
galleryTime = 3; 

而且你期望這個變量將所有3個值。事實並非如此。每次迭代都會覆蓋前一個。

您需要一個計時器，而不是多個。這是基本的想法。

$(function() { 
 
    var timer; 
 
     lis = $(".img"); 
 
    
 
    function showNext() {  
 
    var active = lis.filter(".active").removeClass("active"); 
 
    var next = active.next(); 
 
    if (next.length===0) { 
 
     next = lis.eq(0); 
 
    } 
 
    next.addClass("active");  
 
    } 
 

 
    function playGallery() { 
 
    stopGallery(); 
 
    timer = window.setInterval(showNext, 1000); 
 
    } 
 

 
    function stopGallery() { 
 
    if (timer) window.clearTimeout(timer); 
 
    } 
 
    
 
    $(".gallery") 
 
    .on("mouseleave", playGallery) 
 
    .on("mouseenter", stopGallery); 
 

 
    playGallery(); 
 
    
 
});

.img { 
 
    display : none; 
 
} 
 

 
.img.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="gallery"> 
 
    <li class="img active">1</li> 
 
    <li class="img">2</li> 
 
    <li class="img">3</li> 
 
    <li class="img">4</li> 
 
    <li class="img">5</li> 
 
</ul>