重写循环的javascript_Javascript_Jquery_Loops_Overriding

重写循环的javascript

javascript jquery loops

重写循环的javascript,javascript,jquery,loops,overriding,Javascript,Jquery,Loops,Overriding,这可能是不可思议的，询问如此庞大的代码位…但基本上我有一个完整的部分，循环通过4个div的内容。那很好。然后我有一个部分，如果你把鼠标悬停在一个div上，该部分将保持活动状态，或者如果你点击该div，它将保持持续活动状态。这个钻头本身也能工作。但是当我把它们结合在一起时，我有一个问题，就是即使你在悬停，循环也会一直工作，因为循环永远不会停止现在，有没有一种方法可以使悬停和单击位同时暂停循环部分。本质上，我正在尝试编写我自己的更小版本的幻灯片，你可以在internetz上看到谢谢 $(wind

这可能是不可思议的，询问如此庞大的代码位…但基本上我有一个完整的部分，循环通过4个div的内容。那很好。然后我有一个部分，如果你把鼠标悬停在一个div上，该部分将保持活动状态，或者如果你点击该div，它将保持持续活动状态。这个钻头本身也能工作。但是当我把它们结合在一起时，我有一个问题，就是即使你在悬停，循环也会一直工作，因为循环永远不会停止

现在，有没有一种方法可以使悬停和单击位同时暂停循环部分。本质上，我正在尝试编写我自己的更小版本的幻灯片，你可以在internetz上看到

谢谢

$(window).load(function(){
var clicked = 0;
var i = 1;                    
var j = (i - 1);

function myLoop () {       
setTimeout(function () {
   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) {
    $("#nH1stuff").show();$("#nH1picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH1stuff").hide();$("#nH1picture").hide();
    }
    else {}
});

$("#nH2").hover(function() {if (clicked == 0) {
    $("#nH2stuff").show();$("#nH2picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH2stuff").hide();$("#nH2picture").hide();
    }
    else {}
});

$("#nH3").hover(function() {if (clicked == 0) {
    $("#nH3stuff").show();$("#nH3picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH3stuff").hide();$("#nH3picture").hide();
    }
    else {}
}); 

$("#nH4").hover(function() {if (clicked == 0) {
    $("#nH4stuff").show();$("#nH4picture").show();
}else{}},function(){
    if (clicked == 0) {
    $("#nH4stuff").hide();$("#nH4picture").hide();
    }
    else {}
});
});

$（窗口）.load（函数（）{
var=0；
var i=1；
var j=（i-1）；
函数myLoop（）{
setTimeout（函数（）{
如果（单击==0）{
$（“#nHstuff4”）.hide（）；$（“#nHpicture4”）.hide（）；
$（“#nH4”）.removeClass（“活动”）；
$（“#nHstuff”+j）.hide（）；$（“#nHpicture”+j）.hide（）；
$（“#nH”+j）.removeClass（“活动”）；
$（“#nHstuff”+i）.show（）；$（“#nHpicture”+i）.show（）；
$（“#nH”+i）.addClass（“活动”）；
i++；
j++；
如果（i<5）{
myLoop（）；
}   
else如果（i==5）{
i=1；
j=0；
myLoop（）；
} 
}其他{}，3000）；
}
myLoop（）；
$（“#nH1”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH1”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH2”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH2”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH3”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH3”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH4”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH4”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH1”）.hover（函数（）{if（单击==0）{
$（“#nh1staff”）.show（）；$（“#nH1picture”）.show（）；
}else{}，函数（）{
如果（单击==0）{
$（“#nh1staff”）.hide（）；$（“#nH1picture”）.hide（）；
}
else{}
});
$（“#nH2”）.hover（函数（）{if（单击==0）{
$（“#nH2stuff”）.show（）；$（“#nH2picture”）.show（）；
}else{}，函数（）{
如果（单击==0）{
$（“#nH2stuff”）.hide（）；$（“#nH2picture”）.hide（）；
}
else{}
});
$（“#nH3”）.hover（函数（）{if（单击==0）{
$（“#nh3staff”）.show（）；$（“#nH3picture”）.show（）；
}else{}，函数（）{
如果（单击==0）{
$（“#nh3staff”）.hide（）；$（“#nH3picture”）.hide（）；
}
else{}
}); 
$（“#nH4”）.hover（函数（）{if（单击==0）{
$（“#nH4stuff”）.show（）；$（“#nH4picture”）.show（）；
}else{}，函数（）{
如果（单击==0）{
$（“#nH4stuff”）.hide（）；$（“#nH4picture”）.hide（）；
}
else{}
});
});

试试这个

$(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 {}
});
});

$（窗口）.load（函数（）{
var=0；
var i=1；
var j=（i-1）；
var悬停=假；
函数myLoop（）{
setTimeout（函数（）{
如果（悬停）返回；
如果（单击==0）{
$（“#nHstuff4”）.hide（）；$（“#nHpicture4”）.hide（）；
$（“#nH4”）.removeClass（“活动”）；
$（“#nHstuff”+j）.hide（）；$（“#nHpicture”+j）.hide（）；
$（“#nH”+j）.removeClass（“活动”）；
$（“#nHstuff”+i）.show（）；$（“#nHpicture”+i）.show（）；
$（“#nH”+i）.addClass（“活动”）；
i++；
j++；
如果（i<5）{
myLoop（）；
}   
else如果（i==5）{
i=1；
j=0；
myLoop（）；
} 
}其他{}，3000）；
}
myLoop（）；
$（“#nH1”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH1”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH2”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH2”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH3”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH3”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH4”）。单击（函数（）{
如果（单击==0）{
单击=1；
$（“#nH4”）.addClass（“活动”）；
}否则如果（单击==1）{
$（“.nHstuff”）.hide（）；
$（“.nH”）.removeClass（“活动”）；
单击=0；
}
});
$（“#nH1”）.hover（函数（）{if（单击==0）{
悬停=真；
$（“#nh1staff”）.show（）；$（“#nH1picture”）.show（）；
}else{}，函数（）{
悬停=错误；
如果（单击==0）{
$（“#nh1staff”）.hide（）；$（“#nH1picture”）.hide（）；
}
else{}
});
$（“#nH2”）.hover（函数（）{if（单击==0）{
悬停=真；
$（“#nH2stuff”）.show（）；$（“#nH2picture”）.show（）；
}else{}，函数（）{
悬停=错误；
如果（单击==0）{
$（“#nH2stuff”）.hide（）；$（“#nH2picture”）.hide（）；
}
else{}
});
$（“#nH3”）.hover（函数（）{if（单击==0）{
悬停=真；
$（“#nh3staff”）.show（）；$（“#nH3picture”）.show（）；
}else{}，函数（）{
悬停=错误；
如果（单击==0）{
$（“#nh3staff”）.hide（）；$（“#nH3picture”）.hide（）；
}
else{}
}); 
$（“#nH4”）.hover（函数（）{if（单击==0）{
悬停=真；
$（“#nH4stuff”）.show（）；$（“#nH4picture”）.show（）；
}else{}，函数（）{
悬停=错误；
如果（单击==0）{
$（“#nH4stuff”）.hide（）；$（“#nH4picture”）.hide（）；
}
else{}
});
});

我只是添加了悬停的变量

和
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
    }
 });