Question

我想要创建的是缩略图中的影片剪辑。困难在于这些缩略图来自不同的网站。这意味着，拇指计数器的位置由每个URL不同。我用“$ var”替换了计数器的点，这是我的锚点。

例如

;我有这些拇指网址

http://site.net/videos/thumbs/9d/06/80/9d0680f347eb6/9d0680f347eb6.$var.jpg

http://site.net/_thumbs/0000043/0043917/0043917_$varm.jpg

http://site.net/201309/16/8834679/original/$var.jpg?m=eSuQKgaaaa&mh=t0i7nVhjZleTJ5Ih

我想通过悬停创建一个计数器，一个用$替换$ var的计数器。

我的HTML代码是这样的：

<a href="" class="ml" data-int="3" data-src="http://site.net/_thumbs/0000312/0312718/0312718_$varm.jpg">
<img id="test" src="http://site.net/_thumbs/0000312/0312718/0312718_002m.jpg"/>
</a>

我使用jQuery构建它，它可以替换，但是当有人离开图像时我无法停止循环（mouseout）。 'fillout'我还没有使用这个函数，它将是一个用零填充计数器的函数，有时我需要'002'而不是'1'。我从data-int

获得的这些数字的数量

$('a.ml').hover(function(){

   //fillout = $(this).data('int');
   var img = $(this).data('src');

    // loop
    var i = 2;
    function loopLi() {
        setInterval(function() {

            if(i != 8) {
                i++;

                $('img#test').attr("src", img.replace(/\$var/, "00" + i));
            }

        }, 500);
    }

    $(loopLi);
});
$('a.ml').mouseleave(function(){

   //fillout = $(this).data('int');

   // get image url
   var img = $(this).data('src');
   $('img#test').attr("src", img.replace(/\$var/, "002"));
});

Answer 1

.hover（）是注册mouseenter和mouseleave处理程序的捷径，如果只传递一个函数，则会在两个事件上调用相同的函数。

要取消循环，您需要在mouseenter上存储间隔参考并在mouseleave上取消它。

尝试

$('a.ml').hover(function(){
    //fillout = $(this).data('int');
    var img = $(this).data('src');

    // loop
    var i = 2;
    var interval = setInterval(function() {
        if(i != 8) {
            i++;
            $('img#test').attr("src", img.replace(/\$var/, "00" + i));
        }
    }, 500);
    $(this).data('interval', interval)
}, function(){
    clearInterval($(this).data('interval'))

    //fillout = $(this).data('int');

    // get image url
    var img = $(this).data('src');
    $('img#test').attr("src", img.replace(/\$var/, "002"));
})

mouseout时jquery停止循环

1 个答案: