Javascript 如何在滑块中暂停悬停

Js

CSS

加价

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } 
.slider li { display: none; position: absolute; top: 0; left: 0; }

使用图像上的mouseover和mouseout事件来实现此目的

var$slider=$（'.slider'）；
var$slide='li'；
var$transition_time=1000；
var$time\u幻灯片之间的时间=4000；
函数slides（）{
返回$slider.find（$slide）；
}
幻灯片（）；
幻灯片（）.first（）.addClass（'active'）；
幻灯片（）.first（）.fadeIn（$transition\u time）；
$function=function（）{
var$i=$slider.find（$slide+'.active'）.index（）；
slides（）.eq（$i）.removeClass（'active'）；
幻灯片（）；
如果（slides（）.length==$i+1）$i=-1；//循环开始
幻灯片（）.eq（$i+1）.fadeIn（$transition\u time）；
slides（）.eq（$i+1）.addClass（'active'）；
}
$interval=setInterval（$function，$transition\u time+$time\u幻灯片之间的时间）；
$（“img”）。在（“鼠标悬停”，函数（）上{
clearInterval（$interval）；
});
$（“img”）。在（“mouseout”，function（）上{
$interval=setInterval（$function，$transition\u time+$time\u幻灯片之间的时间）；
});

滑块{边距：10px 0；宽度：1024px；高度：500px；位置：相对；溢出：隐藏；}。滑块{显示：无；位置：绝对；顶部：0；左侧：0；}

不客气：）如果这满足了您的要求，您会将其标记为答案吗？我做到了，但这不再有效？我将鼠标悬停在上方，滑块继续播放。。。

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } 
.slider li { display: none; position: absolute; top: 0; left: 0; }

<section id="">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul class="slider">
              <li>
                <img src="images/highlights/foundation_transparent.png" alt="First slide">
              </li>
              <li>
                <img src="images/highlights/nps_timeline_transparent.png" alt="Second slide">
              </li>
              <li>
                <img src="images/highlights/nps_score_transparent.png" alt="Third slide">
              </li>
              <li>
                <img src="images/highlights/startup_bridge_india_pr.png" alt="fourth slide">
              </li>
            </ul>
        </div>
    </div>
</section>