Question

这可能是荒谬的，询问了如此大量的代码......但基本上我有一个整个部分循环通过4个div的内容。工作正常。然后我有一个部分，如果你将鼠标悬停在div上，该部分将保持活动状态，或者如果你单击div它将保持不变。这个位也可以自己工作。但是当我把它们组合起来时，我的问题是即使你正在盘旋，循环也会一直有效，因为循环永远不会停止。

现在，有没有办法让悬停和点击位也暂停循环部分。 essentailly我正在尝试编写你在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 {}
});
});

Answer 1

试试这个......

$(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的谷歌搜索，因为它更适合这样的事情。

顺便说一句，赞成制作自己的版本并学习如何操作，而不仅仅是使用插件:)插件很棒，通常非常方便，但你不能打败知道如何自己做！

Answer 2

将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查看已知间隔的定期计划事件。它会使代码更容易理解。

javascript覆盖循环

2 个答案: