在mouseleave上调用clearInterval

问题描述 投票:0回答:2

我正在尝试使用setInterval创建一个图像幻灯片,当鼠标在.project-img上时开始播放,当鼠标离开.project-img时暂停。我遇到的问题是当鼠标离开时调用清除间隔以暂停幻灯片显示,我当前收到错误:

Uncaught ReferenceError: cycle is not defined

我哪里错了?

var Image = {
    init: function() {
        Image.setupImages();
        Image.bindEvents();
    },
    bindEvents: function() {
        $('.project-img').hover(function() {
            var hovered = $(this);
            var thumbnailIndex = 0
            var thumbnailArray = hovered.children()
            console.log(thumbnailArray);
            var cycle = setInterval(function(){
                thumbnailIndex++
                if (thumbnailIndex === thumbnailArray.length) {
                    thumbnailIndex = 0;
                    thumbnailArray.removeClass('active');
                    thumbnailArray.eq(0).addClass('active');
                } else {
                    var $visible = thumbnailArray.eq(thumbnailIndex);
                    thumbnailArray.removeClass('active');
                    $visible.addClass('active');
                }
            }, 700);
        }, function() {
            clearInterval(cycle);
        });
    },
    setupImages: function() {
        var projectImage = $('.project-img');
        projectImage.each(function(project) {
            $(this).find('.project-thumbnail:eq(0)').addClass('active');
        });
    }
}
$(document).ready(function() {
    Image.init();
});
.project-thumbnail {
    visibility: hidden;
    display: none;
}
.active {
    visibility: visible;
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="project-img">
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
</div>

<div class="project-img">
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
</div>
javascript jquery
2个回答
1
投票

这是一个范围问题,你已经定义了一个函数内的循环,所以它不能离开。把var cycle放在var Image上面,你的问题就会解决!或者,如果你想将它限定在Image var中,你可以用cycle替换Image.cycle,这也可以。


1
投票

变量cycle的范围不同。而不是使用hover使用each,在cycle的外部范围内声明hover变量,如下所示:

var Image = {
  init: function() {
    Image.setupImages();
    Image.bindEvents();
  },
  bindEvents: function() {
    $('.project-img').each(function() {
      var hovered = $(this);
      var cycle;
      hovered.hover(function() {
        var thumbnailIndex = 0;
        var thumbnailArray = hovered.children();
        cycle = setInterval(function() {
          thumbnailIndex++
          if (thumbnailIndex === thumbnailArray.length) {
            thumbnailIndex = 0;
            thumbnailArray.removeClass('active');
            thumbnailArray.eq(0).addClass('active');
          } else {
            var $visible = thumbnailArray.eq(thumbnailIndex);
            thumbnailArray.removeClass('active');
            $visible.addClass('active');
          }
        }, 700);
      }, function() {
        clearInterval(cycle);
      });
    });
  },
  setupImages: function() {
    var projectImage = $('.project-img');
    projectImage.each(function(project) {
      $(this).find('.project-thumbnail:eq(0)').addClass('active');
    });
  }
}
$(document).ready(function() {
  Image.init();
});
.project-thumbnail {
  visibility: hidden;
  display: none;
}

.active {
  visibility: visible;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="project-img">
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/ffffff/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/ffffff/000000">
  </div>
</div>

<div class="project-img">
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/ffffff/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/000000">
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.