试图在悬停时解释jQuery /冻结窗格

时间:2012-06-01 13:48:38

标签: javascript jquery

所以我试着阅读几年前由我的组织编写的一些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
}

2 个答案:

答案 0 :(得分:1)

您对代码的理解非常准确。为了实现你想要的功能,我会做一些事情。首先,将定时器代码移动到一对函数中:

function holdThisSlide() {
  clearTimeout(timer);
}

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

接下来,将showNextSlideIn()的电话放在showSlide的底部,您刚刚删除了clearTimeout / setTimeout行。

最后,在函数定义上方添加悬停行为:

$(".panes .pane").hover(
  function() { holdThisSlide(); },
  function() { showNextSlideIn(); }
);

答案 1 :(得分:0)

您发布的代码写得不是很好但是这里有一个快速解决方案来做您想要的。 可能最好的方法是在鼠标悬停在幻灯片容器上时清除超时,并在鼠标离开时设置新的超时。

它应该类似于:

$('#slidecontainer').hover(    // setting hover handlers for #slidecontainer
    function() {    // mouse enter
        clearTimeout(timer);
    },
    function() {    // mouse leave
        timer = setTimeout('rotateSlide()', time_delay);
    }
)