-1

我要创建的是缩略图中的影片剪辑。困难在于这些缩略图来自不同的网站。这意味着，拇指计数器的位置因每个网址而异。我确实用'$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"));
});
4

1 回答 1

3

.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"));
})
于 2013-09-17T09:58:58.250 回答