Question

嘿，我创造了这个小小提琴：

正如您所看到的，它是滑动图像的一个非常好的工作示例。

但缺少一件事：

当我悬停一个段落时，应禁用“autoslide-function”，这就是我将此代码添加到悬停事件的原因：

event.preventDefault();

但是autoslide功能仍然处理，任何建议？需要你的帮助，GREETING's！

Answer 1

为此，您需要使用Clearinterval()清除间隔，因为幻灯片是通过Setinterval进行的，就像这样。

 // Untuk delay gambarnya

var i = 0, max = 3;
myFunction = function(event){
    $(".subbox1").each(function() {anim(this)});
    i += 1;
    if(i >= max) { i = 0; }
}
var interval = setInterval(myFunction, 1000);

$(".slider").hover(function() {
    clearInterval(interval);
    var img = $('<img>'); 
img.attr('src', $(this).attr('data-url'));
    $('#newImage').html(img);
    $('.images').hide();
    return false;
    i += 1;
   // $(".subbox1").each(function() {anim(this)});

});

$(".slider").mouseout(
    function (){
        $('.images').show();
       // $('#newImage').hide();
interval =   setInterval(myFunction, 1000);
    }
);

更新的演示

Demo

Answer 2

preventDefault是指浏览器的默认操作。例如，链接的默认操作是转到其他页面。悬停事件没有默认操作，这解释了为什么你的preventDefault似乎什么都不做。我想你可能要做的是延迟/杀死计时器。试试这个：

var i = 0, max = 3;
var interval;
function restart() {
    clearInterval(interval);
    interval = setInterval(function(event){
        $(".subbox1").each(function() {anim(this)});
        i = (i + 1) % max;
    }, 5000);
}

$(".slider").hover(function() {
    i = (i + 1) % max;
    restart();
    $(".subbox1").each(function() {anim(this)});
    event.preventDefault();
});

如果想要的行为是在mouseout之前阻止动画，那么你需要这样做：

function anim(selector) {
    $(".images img", selector).first().appendTo($('.images', selector)).fadeOut(1000);  
    $(".images img", selector).first().fadeIn(1000);
}

// Untuk delay gambarnya
var i = 0;
var max = 3;
var interval;
function start() {
    clearInterval(interval);
    interval = setInterval(function(event){
        $(".subbox1").each(function() {
            anim(this);
        });
        i = (i + 1) % max;
    }, 5000);
}

function stop() {
    clearInterval(interval);
}

$(".slider").hover(function() {
    i = (i + 1) % max;
    $(".subbox1").each(function() {
        anim(this);
    });
    stop();
}, function() {
    start();
});

此外，由于您的动画功能会重新排列DOM，因此您可能需要设计一种基于原始顺序来引用图像的方法。否则，您的悬停可能无法正常工作。

编辑：如果第二个示例不清楚，hover函数可以将mouseleave函数作为其第二个参数。

编辑2：我已经修复了代码中的语法错误，以防您仍然想要引用它。

事件发生后防止特定功能

2 个答案: