Javascript 文本幻灯片从悬停开始

Question

我已将文本幻灯片添加到悬停时由 JQuery 调用的 div。每次用户将鼠标悬停在 div 上时，如何让幻灯片从头开始？现在它只是在第一次激活后继续循环。

提前致谢!

<script>

$(document).ready(function(){

$('#mercury .infos').hover(

  function () {
            if($("a.active").is('.mercury')){
                $("#descriptionls").fadeIn("2000");
            };


        var quotes = [
        "Who’s the one who’s always there when that keeps happening?",
        "Learn to dismantle self-defeating behaviors",
        "JOIN THE FLOW TODAY",
        ];

        var i = 0;

        setInterval(function() {
            $("#lstextslide").html(quotes[i]);
            if (i == quotes.length)
                i=0;
            else
                i++;
        }, 1 * 4000);



        });


});


</script>

Answer 1

您必须取消之前的间隔并立即调用更新 HTML 的函数。参见 http://jsfiddle.net/xozL96fj/

$(document).ready(function(){

    var intervalTimer = null;

    $('#mercury .infos').hover(

        function () {
            if($("a.active").is('.mercury')){
                $("#descriptionls").fadeIn("2000");
            }

            if (intervalTimer !== null) {
                clearInterval(intervalTimer);
            }

            var quotes = [
                "Who’s the one who’s always there when that keeps happening?",
                "Learn to dismantle self-defeating behaviors",
                "JOIN THE FLOW TODAY",
            ];

            var i = 0;

            function update() {
                 $("#lstextslide").html(quotes[i]);
                 i = (i + 1) % quotes.length;
            }
            // Call it immediately, don't wait until the interval
            update();
            intervalTimer = setInterval(update, 4000);
        });
});