如何在此代码中暂停幻灯片?

时间:2015-12-03 23:39:44

标签: javascript jquery slide

大家

我有这段代码

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

我希望鼠标悬停时暂停,并在鼠标悬停时再次开始播放。

我怎样才能实现这一目标。

谢谢

1 个答案:

答案 0 :(得分:3)

您需要创建一个变量,以便在您悬停时将其设置为true

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

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