Javascript setInterval在第一个实例之后停止

我目前正在一个旋转木马上工作，因为我不想使用任何插件等

然而，我被卡在间隔部分，它在我的元素中旋转，没有点击

工作原理：

• Next

  和

  Prev

  按钮工作
• Interval适用于第一个实例

什么不起作用：

• 一开始，间隔似乎停止了
• 单击

  Prev

  或

  Next

  按钮时，间隔不会继续工作

我已经计算出，在第一个实例之后间隔停止后，我可以离开元素区域并将鼠标悬停在其上，间隔将正常工作

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

到目前为止，我所尝试的：

$（文档）.ready（函数（）{
语句滚动（）；
});
函数语句Scroll（）{
var区间声明=0；
var intervalFunc={
开始：函数（）{
intervalStatement=setInterval（函数（）{
$（“#我们的使命.声明.下一步”）。单击（）；
}, 2000);
},
停止：函数（）{
清除间隔（间隔声明）；
区间陈述=0；
},
};
$（#我们的使命。声明。下一步”）。在（“单击”，函数（）{
if（$（“#我们的使命.声明.项目.活动”）.next（“.item”）.length）{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）.next（“.item”）.addClass（“活动”）；
}否则{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）；
$（“#我们的使命.statement.item”）.first（）.addClass（“活动”）；
}
});
$（#our mission.statement.prev”）。在（“单击”，函数（）上{
if（$（“#我们的使命.声明.项目.活动”）.prev（“.item”）.length）{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）.prev（“项目”）.addClass（“活动”）；
}否则{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）；
$（“#我们的使命.statement.item”）.last（）.addClass（“活动”）；
}
});
$（“#我们的使命”）。关于（“鼠标”，函数（）{
intervalFunc.start（）；
});
$（#我们的使命声明”）。关于（“mouseout”，function（）{
intervalFunc.stop（）；
});
}

#我们的使命{
高度：500px；
最大高度：500px；
溢出：隐藏；
背景：url（../images/6.JPG）不重复；
背景位置：中心；
位置：相对位置；
}
#我们的使命h2{
宽度：25%；
保证金：自动；
利润上限：200px；
字体大小：45px；
背景：#012265；
背景#01226587；
文本对齐：居中；
填充：10px；
颜色：#ffffff；
边界半径：8px；
文本阴影：1px 1px 1px#000000；
}
#我们的使命。声明{
位置：绝对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
可见性：隐藏；
不透明度：0；
背景：#012265；
背景：#012265de；
}
#我们的使命，声明，项目{
显示：无；
}
#我们的使命。声明。h3项{
保证金：0；
字体大小：60px；
}
#我们的使命声明p项{
字体大小：25px；
}
#我们的任务。声明。项目。活动{
显示：块；
身高：100%；
排名：0；
左：0；
填充顶部：175px；
颜色：#ffffff；
文本阴影：1px 2px 2px#000000；
}
#我们的使命：hover>.statement{
能见度：可见；
-webkit过渡：不透明度0.5s，易于调节；
-moz过渡：不透明度0.5s缓进；
-o型过渡：不透明度0.5s；
不透明度：1；
光标：指针；
}
#我们的使命。声明。上一篇{
位置：绝对位置；
左：100px；
顶部：200px；
字体大小：60px；
颜色：#ffffff；
}
#我们的任务，声明，下一步{
位置：绝对位置；
右：100px；
顶部：200px；
字体大小：60px；
颜色：#ffffff；
}

视野
一起学习，一起成就，一起庆祝

使命
让孩子们在快乐和安全的环境中发挥真正的潜能

核心价值观
尊重、渴望、责任感和自豪感

任务说明

使用mouseleave事件代替mouseout。当鼠标指针移出内部元素时，会触发mouseout。当鼠标离开绑定元素时，将触发mouseleave事件

问题是您使用的是

mouseout

事件，一旦鼠标离开事件有界的元素中的任何子元素，就会触发该事件

因此，使用mouseleave将解决问题，因为知道最后一个将仅在离开绑定到的元素时触发（不为子元素触发）

请参见下面的工作片段：

$（文档）.ready（函数（）{
statementScroll（）；
});
函数语句Scroll（）{
var区间说明；
var intervalFunc={
开始：函数（）{
console.log（'start'）；
intervalStatement=setInterval（函数（）{
$（“#我们的使命.声明.下一步”）。单击（）；
}, 2000);
},
停止：函数（）{
console.log（'stop'）；
清除间隔（间隔声明）；
},
};
$（#我们的使命。声明。下一步”）。在（“单击”，函数（）{
if（$（“#我们的使命.声明.项目.活动”）.next（“.item”）.length）{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）.next（“.item”）.addClass（“活动”）；
}否则{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）；
$（“#我们的使命.statement.item”）.first（）.addClass（“活动”）；
}
});
$（#our mission.statement.prev”）。在（“单击”，函数（）上{
if（$（“#我们的使命.声明.项目.活动”）.prev（“.item”）.length）{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）.prev（“项目”）.addClass（“活动”）；
}否则{
$（“#我们的使命.声明.项目.活动”）.removeClass（“活动”）；
$（“#我们的使命.statement.item”）.last（）.addClass（“活动”）；
}
});
$（#我们的使命”）。关于