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>