javascript - 如何在此代码中暂停幻灯片？

Question

大家

我有这个代码

<script type="text/javascript" >
        $(function(){
            var time = 10000;//milliseconds
            var index = 0;
            var container = $("#containerr");
            var childrenCount = $(".slide").length;
            function slideToNext() {

                index = (index + 1) % childrenCount;
                console.log(index);
                container.css({
                    marginLeft: -1 * index * 100 + "%"
                })
            }

            var pt = window.setInterval(function() {
                slideToNext();
            }, time)
        })
    </script>

我想让它在鼠标悬停时暂停，并在鼠标未悬停时再次开始播放。

我怎样才能做到这一点。

谢谢

Answer 1

您需要创建一个变量，当您悬停时将其设置为 true:

var isPaused = false;
$("#containerr").on('hover',
    function() { isPaused = true; },
    function() { isPaused = false; }
);

var pt = window.setInterval(function() {
    if ( !isPaused )
        slideToNext();
}, time)