循环使用超时的函数

时间:2018-01-28 14:57:48

标签: javascript function loops

您好我正在处理 imageslide 。我已经完成了这项功能。问题是我希望它循环。一个图像在屏幕上显示一定时间后,下一个图像应自动淡入。我试图再次调用该函数来循环它,但是图像改变了。似乎超时没有注意到。

有没有人知道如何循环功能而不会丢失每张图像之间的细节?

非常感谢:D

您可以在此处查看我的代码:https://jsfiddle.net/atqawkds/1/

var imagecount = 1;

function imagegallery() {
  var active = document.getElementById('content' + imagecount);
  active.className = "activecontent";

  setTimeout(function() {
    active.className = 'inactivecontent';
  }, 5000);

  if (imagecount >= 3) {
    imagecount = 0;
  };

  imagecount += 1;

  //I´ve tried to do imagegallery(); here. It didn´t worked like I want it to
}
#container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.activecontent {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-size: cover;
  min-width: 900px;
  min-height: 500px;
  opacity: 1;
  animation: settoactive 1000ms ease-in-out;
}

@keyframes settoactive {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.inactivecontent {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-size: cover;
  min-width: 900px;
  min-height: 500px;
  opacity: 0;
  animation: settoinactive 1000ms ease-in-out;
}

@keyframes settoinactive {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#trigger {
  position: absolute;
  top: 10px;
  left: 30px;
  background-color: red;
  cursor: pointer;
}
<html>

<head>
  <link href="style.css" rel="stylesheet">

</head>

<body>
  <div id="container">
    <img src="https://s17.postimg.org/acwwotncv/img1.jpg" id="content1" class="inactivecontent">
    <img src="https://s17.postimg.org/djrg8guy7/img2.jpg" id="content2" class="inactivecontent">
    <img src="https://s17.postimg.org/ojcnk30sv/img3.jpg" id="content3" class="inactivecontent">
  </div>
  <div id="trigger" onclick="imagegallery()">Press to change image</div>
  <!--this button is temporary. The function should trigger when the side is loaded an should loop itself!-->
</body>

</html>

1 个答案:

答案 0 :(得分:0)

您必须使用setInterval回调而不是setTimeout。

active变量创建为全局变量,将其赋予空值。

imagegallery函数中,开始检查active是否为空。如果不是,请更新className属性:active.className = 'inactivecontent';

删除setTimeout阻止。

创建另一个函数myStartingFunction。在myStartingFunction内调用imagegallery();并添加setInterval(imagegallery, 5000);指令。

现在在您的div(id =触发器)中,将imagegallery()替换为myStartingFunction()

你在imagegallery()中调用myStartingFunction,因为每次在第二个参数中传递时,setInterval回调执行作为参数传递的函数,它将在执行imagegallery()第一次之前等待5秒