setInterval在第一个实例后停止

Question

我正在制作旋转木马，因为我不想使用任何插件等。

然而，我被困在间隔部分，它在没有点击的情况下旋转我的元素。

什么有效：

• Next和Prev按钮正常工作
• Interval适用于第一个实例

什么行不通：

• 第一次实例后，间隔似乎停止
• 点击Prev或Next按钮时间隔不会继续有效

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

是否有任何人有任何指导我如何改善这一点？

到目前为止我尝试过：

$(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。鼠标离开绑定元素时会触发mouseleave事件。

Answer 2

问题是您正在使用 mouseout 事件，该事件会在鼠标在事件有界的元素内留下任何子元素时触发。

因此，使用 mouseleave 将解决问题，因为知道最后一次只会触发一次它所绑定的元素（不会触发儿童）

见下面的worknig片段：

＆＃13;

＆＃13;

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

function statementScroll() {
  var intervalStatement;
  var intervalFunc = {
    start: function() {
      console.log('start');
      intervalStatement = setInterval(function() {
        $("#our-mission .statement .next").click();
      }, 2000);
    },
    stop: function() {
      console.log('stop');
      clearInterval(intervalStatement);
    },
  };
  $("#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("mouseleave", function() {
    intervalFunc.stop();
  });
}

＆＃13;

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

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>

＆＃13;

＆＃13;

＆＃13;