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);
});

幻灯片放映，动画绝对有效，没关系。但我想，如果我的光标在图片上，动画将被暂停，当我的光标离开时它会恢复。它几乎正常工作......但是当我刷新页面时（当我将鼠标放入图片并离开它时）它不会启动，并且当我的光标打开时它不会暂停。

感谢您的帮助!!!

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

在您的Javascript上调用[error] /home/zqc/rs/decoder/mul_dual.scala:67:27: type Vec takes type parameters。在元素上检测到mouseleave之前，该函数才会启动，这就是为什么幻灯片不会在页面加载时启动的原因。

至于它没有停止鼠标悬停。您正在startSlider()函数中创建新的interval变量，而不是使用顶部的startSlider()。

像这样修改它应该有效。

interval

jQuery代码不能正常工作

2 个答案: