主页 / 问题 / 831415
Accepted
orel-22
Asked:2020-05-22 05:21:15 +0000 UTC2020-05-22 05:21:15 +0000 UTC

设置间隔问题

  • 772

有一个滑块滚动到给定的时间间隔，当您单击它时。为了使按下时的移位与间隔的移位不一致，我在每次单击时将 SetInterval 设置为零并再次设置。同时，当我点击时，我执行一个班次，重置间隔并恢复它。问题是，在第二次点击之后，间隔似乎误入歧途，并且移位时间减少，大约在第 10 次点击之后，整个滑块开始完全拉动......请解释问题是什么，并告诉我如何修复它。PS 请仅提供选项

document.getElementById('polosa').onclick = together;

var left = 0;
var selfMove =setInterval (move,8000);
function move(){
	var polosa = document.getElementById('polosa');
	left = left - 200;
	if (left < -600){
		left=0;
	}
	polosa.style.left = left + 'px';
	
}
function zero(){
	
	clearInterval(selfMove);
    
}
function again(){
	var selfMove =setInterval (move,8000);
}
function together(){
	move();
	zero();
	again();
}
body{
	margin:0;
}
#slider{
    width:600px;
	overflow:hidden;

}
#polosa{
	position:relative;
	display:flex;
	left:0;
	transition:left 1s ;
	
}
img{
	width: 200px;
	height: 200px;
}

	
<!DOCTYPE html>
<html lang="ru">
<head>
<title>CRAFTBEER-SHOP</title>
<meta name="keywords" content=" ">
<meta name="description" content="">
<meta charset="utf-8">
</head>
<body>
<header class="page-header">

</header>
<main class="page-main">
<div id="slider">
	<div id="polosa">
		<img src="kisa.jpg">
		<img src="sobaka.jpg">
		<img src="ptica.jpg">
		<img src="zmeya.jpg">
		<img src="fish.jpg">
		<img src="bear.jpg">
	</div>
</div>
</main>
<script>

</script>
</body>
</html>

在此处输入代码

在纯 JavaScript 中

javascript

1 个回答

  1. Best Answer

    selfMove错误 -在函数中声明局部变量again。函数中的代码again没有改变全局变量的值selfMove，clearInterval什么都不做（除了第一次），几个计时器开始间歇性地触发。

    document.getElementById('polosa').onclick = together;

var left = 0;
var selfMove = setInterval(move, 8000);

function move() {
  var polosa = document.getElementById('polosa');
  left = left - 200;
  if (left < -600) {
    left = 0;
  }
  polosa.style.left = left + 'px';
}

function again() {
  clearInterval(selfMove);
  /*var*/ selfMove = setInterval(move, 8000);
}

function together() {
  move();
  again();
}
    body {
  margin: 0;
}

#slider {
  width: 600px;
  overflow: hidden;
}

#polosa {
  position: relative;
  display: flex;
  left: 0;
  transition: left 1s;
}

img {
  width: 200px;
  height: 200px;
}
      <header class="page-header">

  </header>
  <main class="page-main">
    <div id="slider">
      <div id="polosa">
        <img src="kisa.jpg">
        <img src="sobaka.jpg">
        <img src="ptica.jpg">
        <img src="zmeya.jpg">
        <img src="fish.jpg">
        <img src="bear.jpg">
      </div>
    </div>
  </main>

    • 1

相关问题