javascript覆盖循环

试试这个。。。

$(window).load(function(){
var clicked = 0;
var i = 1;                    
var j = (i - 1);
var hovering = false;
function myLoop () {       
setTimeout(function () {
    if (hovering) return;
   if (clicked == 0) {
$("#nHstuff4").hide();$("#nHpicture4").hide();
$("#nH4").removeClass("active"); 
$("#nHstuff" + j).hide();$("#nHpicture" + j).hide();     
$("#nH" + j).removeClass("active");
$("#nHstuff" + i).show();$("#nHpicture" + i).show();
$("#nH" + i).addClass("active");
        i++;
        j++;
  if (i < 5) {        
     myLoop();        
  }   
  else if (i == 5) {
      i = 1;
      j = 0;
      myLoop();
  } 
   }else{} } ,3000);
}
myLoop();                     
$("#nH1").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH1").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH2").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH2").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH3").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH3").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
    $("#nH4").click(function() {
    if (clicked == 0) {
        clicked = 1;
        $("#nH4").addClass("active");
    }else if (clicked == 1) {
        $(".nHstuff").hide();
        $(".nH").removeClass("active");
        clicked = 0;
    }
});
$("#nH1").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH1stuff").show();$("#nH1picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    }
    else {}
});
$("#nH2").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH2stuff").show();$("#nH2picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH2stuff").hide();$("#nH2picture").hide();
    }
    else {}
});
$("#nH3").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH3stuff").show();$("#nH3picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH3stuff").hide();$("#nH3picture").hide();
    }
    else {}
}); 
$("#nH4").hover(function() {if (clicked == 0) {
    hovering = true;
    $("#nH4stuff").show();$("#nH4picture").show();
}else{}},function(){
    hovering = false;
    if (clicked == 0) {
    $("#nH4stuff").hide();$("#nH4picture").hide();
    }
    else {}
});
});

我只添加了变量hovering，悬停时将其设置为true，不悬停时设置为false。然后我在超时中添加了一个条件返回。（这与您对clicked所做的操作类似，但使用了布尔值而不是整数）。

有一个更好的方法来完成超时。你可以使用setInterval，这样你就不必一直调用它，然后你可以在悬停时使用clearInterval，在停止悬停时再调用setInterval。不过，你所拥有的一切都会奏效。只要在谷歌上搜索一下setInterval，因为它更适合这样的东西。

顺便说一句，制作自己的版本并学习如何做到这一点，而不仅仅是使用插件，值得称赞：）插件非常棒，通常非常方便，但你无法战胜自己知道如何做！

将timerID的值保存在变量中。

var loopTimer = 0;
function myLoop() {
   loopTimer = setTimeout(function() {
      //All your loop code
   }, 30000);
}

清除悬停时的超时，并在鼠标离开时重新启动：

$("#nH1").hover(function() {if (clicked == 0) {
   hovering = true;
    $("#nH1stuff").show();$("#nH1picture").show();
   clearTimeout(loopTimer);
    }
  },function() {
    hovering = false;
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    myLoop(); //restart your loop
    }
 });

请研究在已知的时间间隔上对定期安排的事件使用setInterval。这将使代码更易于理解。