javascript - setInterval 在第一次实例后停止

Question

我目前正在开发轮播，因为我不想使用任何插件等。

但是我卡在了间隔部分，它在我的元素中旋转而没有点击。

什么有效:

• Next 和 Prev 按钮有效
• 间隔适用于第一种情况

什么不起作用:

• 在第一个实例之后，间隔似乎停止了
• 点击 Prev 或 Next 按钮时，Interval 不继续工作

我发现在第一个实例后间隔停止后，我可以离开元素区域并将鼠标悬停在它上面，间隔将正常工作。

有没有人对我如何改进这一点有任何指导？

到目前为止我已经尝试过:

$(document).ready(function() {
  statementScroll();
});

function statementScroll() {
  var intervalStatement = 0;
  var intervalFunc = {
    start: function() {
      intervalStatement = setInterval(function() {
        $("#our-mission .statement .next").click();
      }, 2000);
    },
    stop: function() {
      clearInterval(intervalStatement);
      intervalStatement = 0;
    },
  };
  $("#our-mission .statement .next").on("click", function() {
    if ($("#our-mission .statement .item.active").next(".item").length) {
      $("#our-mission .statement .item.active").removeClass("active").next(".item").addClass("active");
    } else {
      $("#our-mission .statement .item.active").removeClass("active");
      $("#our-mission .statement .item").first().addClass("active");
    }
  });
  $("#our-mission .statement .prev").on("click", function() {
    if ($("#our-mission .statement .item.active").prev(".item").length) {
      $("#our-mission .statement .item.active").removeClass("active").prev(".item").addClass("active");
    } else {
      $("#our-mission .statement .item.active").removeClass("active");
      $("#our-mission .statement .item").last().addClass("active");
    }
  });

  $("#our-mission").on("mouseenter", function() {
    intervalFunc.start();
  });

  $("#our-mission .statement").on("mouseout", function() {
    intervalFunc.stop();
  });
}

#our-mission{
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    background: url(../images/6.JPG) no-repeat;
    background-position: center;
    position: relative;
}
#our-mission h2{
    width: 25%;
    margin: auto;
    margin-top: 200px;
    font-size: 45px;
    background: #012265;
    background: #01226587;
    text-align: center;
    padding: 10px;
    color: #ffffff;
    border-radius: 8px;
    text-shadow: 1px 1px 1px #000000;
}
#our-mission .statement{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    background: #012265;
    background: #012265de;
}
#our-mission .statement .item{
    display: none;
}
#our-mission .statement .item h3{
    margin: 0;
    font-size: 60px;
}
#our-mission .statement .item p{
    font-size: 25px;
}
#our-mission .statement .item.active{
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 175px;
    color: #ffffff;
    text-shadow: 1px 2px 2px #000000;
}
#our-mission:hover > .statement{
    visibility: visible;
    -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    opacity: 1;
    cursor: pointer;
}
#our-mission .statement .prev{
    position: absolute;
    left: 100px;
    top: 200px;
    font-size: 60px;
    color: #ffffff;
}
#our-mission .statement .next{
    position: absolute;
    right: 100px;
    top: 200px;
    font-size: 60px;
    color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="our-mission">
  <div class="statement">
    <div class="prev"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i></div>
    <div class="item active">
      <h3>Vision</h3>
      <p>Learn Together, Achieve Together and Celebrate Together</p>
    </div>
    <div class="item">
      <h3>Mission</h3>
      <p>To enable children to achieve their true potential in a happy and safe environment</p>
    </div>
    <div class="item">
      <h3>Core Values</h3>
      <p>Respect, Aspiration, Responsibility and Pride</p>
    </div>
    <div class="next"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></div>
  </div>
  <h2>Mission Statements</h2>
</section>

Answer 1

而不是使用 mouseout 使用 mouseleave 事件。当鼠标指针移出内部元素时触发 mouseout。当鼠标离开绑定(bind)元素时触发 mouseleave 事件。