Question

我有一个函数，它在一行中逐渐淡入和淡出四个盒子，然后一次又一次地循环。方框1淡入淡出，然后方框2，方框3，最后方框4.这是在一个功能中完成的。

我有另一个功能，当用户将鼠标悬停在其中一个框的标题上时，该框将会淡入。然后当它们悬停时它会淡出。我想在这个函数中做的是当它们悬停在盒子上的一个标题上时，控制循环的函数（startSlider）将淡出，然后当它们悬停在标题上时，循环再次开始。

以下是一些代码：

function startSlider(){
    //code that is looping through each box is here
};

function hoverHere(){
    $('.headings .b1').on("mouseenter", function(){
        $('.box #1').fadeIn(300);
        //startslider() fade out this function
    })
    .on("mouseleave", function(){
        $('.box #1').fadeOut(300);
        //startslider() begins again
    });

    //there is the same code here for .b2 and .box #2 and so on
}

感谢您提供有关如何在悬停生效时停止此循环功能的任何帮助，然后在悬停关闭时启动startSlider（）函数。

Answer 1

我已将所有内容放在一个函数中，因此所有变量都将是在范围..我也使用.index（），它给你元素的索引关于它的父母（一种更简单的连接点击框和受影响的信息框之间的方式。为了使循环立即开始，我将实际滑动函数与循环间隔分开，因此您可以在开始时单独调用该函数然后启动循环。注意您只需要调用startSlider（）函数在doc准备好了。如果您有任何问题，请告诉我。如果您宁愿以其他方式执行此操作，只希望循环函数立即启动，而不是像示例中那样分离滑动函数。

function startSlider(){

    // timer
    var loop = 0;

    // get total boxes
    var count=$('.box .info').length; 

    // slide index
    var sliderIndex = 0;

    // boxes
    var boxes = $(".headings").children("div");

    // info boxes
    var infoboxes = $("#main_cont").find(".info");

    // bind boxes hover
    boxes.off().on('mouseenter', handlehover);

    function resetSlider() {
        window.clearInterval(loop);
        loop=window.setInterval(moveSlider, 2000);
    }
    function moveSlider() {
        if(sliderIndex+1 == count){  //will reset to first image when last image fades out
            sliderIndex = 0;
        }
        infoboxes.fadeOut(400);
        infoboxes.eq(sliderIndex).fadeIn(400); // slider image + the next image in the slider

        sliderIndex++;
    }

    function handlehover() {
        var boxnum = $(this).index();

        boxes.off().on('mouseleave', resetSlider);
        pauseSlider();
    }

    function pauseSlider() {
        window.clearInterval(loop);
        infoboxes.not(":eq("+boxnum+")").fadeOut(400);
        infoboxes.eq(boxnum).fadeIn(400);

    }
}

$(function() {
    startSlider();
});

从另一个功能淡出功能

1 个答案: