鼠标移开时清除间隔

发布于 2024-11-17 02:11:48 字数 787 浏览 0 评论 0原文

我试图获得一个简单的图像循环（无过渡）来工作，图像在鼠标悬停时开始循环，并在鼠标移开时停止循环。除了在鼠标移出时停止之外，此方法有效。我很难弄清楚如何清除间隔：

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length;          
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    var infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

如何让倒数第二行工作？

编辑：修复了一些非代码拼写错误

原文

I'm trying to get a simple image cycle (no transitions) to work where images begin to cycle on mouseover, and stop cycling on mouseout. This works, except for stopping on mouseout. I'm having a hard time figuring out how to clear the interval:

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length;          
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    var infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

How can I get that second-to-last line working?

Edit: fixed a couple of non-code typos

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枉心 2024-11-24 02:11:48

在函数外部定义 varInfiniteLoop，并在函数内部将超时设置为 infiniteLoop = setInterval...（不带 var）。完整代码：

var infiniteLoop;
$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

Define var infiniteLoop outside of the function, and inside the function set the timeout as infiniteLoop = setInterval... (without var). Full code:

var infiniteLoop;
$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

回复收藏 0 原文

往日 2024-11-24 02:11:48

您在函数内声明了InfiniteLoop，该函数在您调用它的另一个匿名函数内不可用。只需在两个函数之外声明该变量即可。

回复收藏 0 原文

菊凝晚露 2024-11-24 02:11:48

我认为你有一个范围问题。尝试

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length; 
var infiniteLoop = null;      
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

I think you have a scope issue. try

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length; 
var infiniteLoop = null;      
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

回复收藏 0 原文

~没有更多了~