0

所以我正在尝试阅读一些几年前由我的组织编写的 jQuery。我对 jQuery 不是很精通（但我对 Javascript 很熟悉）。如果用户将鼠标悬停在幻灯片上，我试图阻止幻灯片旋转到下一张幻灯片。

这是代码的第一部分，我认为它所决定的只是幻灯片应该出现的位置和方式。我认为它还说幻灯片将每 7 秒切换一次。

var current_slide_index = 0; //The index of the slide being displayed;
var timer; //the timer counting the delay to the transition
var time_delay = 7000;

    $(document).ready( function() {



        $('.pane:first').addClass('current');

        if (!$.support.opacity) $('.panes .pane').not('.current').hide();

        $('.tabs a').click( function(e) {
            e.preventDefault();

            var triggers = $('.tabs a');
            current_slide_index = triggers.index($(this));

            showSlide();

            });

        });


function showSlide() //Show the slide indicated by current_slide_index
{
    var triggers = $('.tabs a');
    triggers.removeClass('current').eq(current_slide_index).addClass('current');
            var old_slide = $('.panes .pane.current');

            if (!$.support.opacity) {
                old_slide.children().fadeOut(500, function() {
                    old_slide.removeClass('current').hide();
                    $('.panes .pane').eq(current_slide_index).addClass('current').show().children().fadeIn(300);
                    });
            } else {
                old_slide.removeClass('current').fadeOut(500, function() {
                    $('.panes .pane').eq(current_slide_index).addClass('current').fadeIn(300);
                    });
                }

    clearTimeout(timer);
    timer = setTimeout('rotateSlide()',time_delay);

}

我相信这是我必须停止的部分 - 我可以通过设置某种条件来确定我是否将鼠标悬停在相关幻灯片上吗？这就是我缺乏 jQuery 知识伤害我的地方 - 我没有最模糊的如何停止滑块。

function rotateSlide() //move the slide to the next one
{
        //calculate the next index
        var triggers = $('.tabs a');
        //wrap to index zero if necessary
        current_slide_index = (current_slide_index + 1) % triggers.length;

        //Now show the new slide
        showSlide();

}


timer = setTimeout('rotateSlide()',time_delay);

所以我的问题是，谁能更清楚地为我解释这段代码，如果你将鼠标悬停在滑块上，有没有办法防止滑块滑动？

据我所知，我可以选择#slider 并使用类似的东西（这是伪代码）

if ($("slider").hover) {
blah blah blah thing that prevents slide from rotating
}
else {
code that allows rotating
}
4

2 回答 2

1

您对代码的理解非常准确。为了实现您想要的功能，我会做几件事。首先，将计时器代码移动到一对函数中，如下所示：

function holdThisSlide() {
  clearTimeout(timer);
}

function showNextSlideIn(delay) {
  delay = delay || time_delay;
  holdThisSlide();
  timer = setTimeout('rotateSlide()',delay);
}

接下来，将调用放在您刚刚删除 clearTimeout/setTimeout 行showNextSlideIn()的底部。showSlide

最后，在函数定义上方添加悬停行为：

$(".panes .pane").hover(
  function() { holdThisSlide(); },
  function() { showNextSlideIn(); }
);
于 2012-06-01T13:59:38.010 回答
0

您发布的代码写得不是很好，但这里有一个快速修复来做您想做的事情。可能最好的方法是在鼠标悬停在幻灯片容器上时简单地清除超时，并在鼠标离开时设置新的超时。

它应该看起来像：

$('#slidecontainer').hover(    // setting hover handlers for #slidecontainer
    function() {    // mouse enter
        clearTimeout(timer);
    },
    function() {    // mouse leave
        timer = setTimeout('rotateSlide()', time_delay);
    }
)
于 2012-06-01T13:57:38.800 回答