setInterval在第一個實例后停止

Question

我正在研究旋轉木馬，因為我不想使用任何插件等。

然而，我被困在間隔部分，它沒有點擊旋轉我的元素。

什么有效：

• Next和Prev按鈕有效
• Interval適用於第一個實例

什么行不通：

• 在第一次實例之后，間隔似乎停止了
• 單擊“上Prev或“ Next 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片段：

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

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

 <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>