您好我正在处理 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>
答案 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秒