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);
        });
});

Answer 2

您需要检查滑块是否已被激活。如果在滑块已处于活动状态时将鼠标悬停在滑块上，则必须重置$ i，然后再次调用setInterval（）。

Javascript文本幻灯片从开始时悬停开始

2 个答案: