我有这样的代码，使我能够设置一个计时器来显示/隐藏div，但我想调整它，使其能够设置不同的计时器，我的意思是一些div用于2000ms，另一些用于1500ms。但我不知道该怎么做，因为我从来没有用JS编码，我试图适应idangerous，但我也无法使其工作。
编辑：我通过添加"；如果"；JS中的语句！但我仍然有大约100个div，这有点"坏编码的"；在我看来这样做。
这是js:
<script>
$(document).ready(function() {
var images = $('.images')
current = 0;
images.hide();
Rotator();
function Rotator() {
if (current == 1 || current == 3){
$(images[current]).fadeIn('slow').delay(2500).fadeOut('slow');
}
else{
$(images[current]).fadeIn('slow').delay(10).fadeOut('slow');
}
$(images[current]).queue(function() {
current = current < images.length - 1 ? current + 1 : 0;
Rotator();
$(this).dequeue();
});
}
});
</script>
以及在HTML:中
<div id="imagescollection">
<div class="images"><!----- 1 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek
_2lel">Anne faure (Brouteur)</div>
<div class="_3-95 _2let"><div><div></div><div>Coucou</div><div></div><div></div></div>
</div>
<div class="_3-94 _2lem">15 janv. 2022 à 08:29</div></div></div>
<div class="images"><!----- 73 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek
_2lel">Sir Perceval</div>
<div class="_3-95 _2let"><div><div></div><div>Salut</div><div></div><div></div></div>
</div>
<div class="_3-94 _2lem">15 janv. 2022 à 08:56</div></div></div>
<div class="images"><!----- 72 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek
_2lel">Anne faure (Brouteur)</div>
<div class="_3-95 _2let"><div><div></div><div>Comment tu vas</div><div></div><div></div>
</div></div>
<div class="_3-94 _2lem">17 janv. 2022 à 07:30</div></div></div>
<div class="images"><!----- 71 ------>
<div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek
_2lel">Sir Perceval</div>
<div class="_3-95 _2let"><div><div></div><div>On se connaît?</div><div></div><div></div>
</div></div>
<div class="_3-94 _2lem">17 janv. 2022 à 11:09</div></div></div>
</div>
有没有一种方法可以调整这个代码，以便能够为我的div设置不同的时间？提前谢谢！
如果你想渲染更多的div，你可以尝试这种方式
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
style.css
.reveal{
padding: 2rem;
background-color: pink;
margin: 1rem;
transform: translateX(150%);
transition: all 0.5s ease-in-out;
}
body{
overflow-x: hidden;
}
script.js
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
for(var i=0; i<100; i++){
var div = document.createElement('div');
div.classList.add('reveal')
div.innerText = `This is div ${i}`; // here u can use other array which contains the contents
document.body.appendChild(div);
}
var reveals = document.getElementsByClassName('reveal');
for(var i=0; i<reveals.length; i++){
((div)=>{
setTimeout(()=>{
div.style.transform = 'translate(0)';
}, 1000*(i+1));
})(reveals[i]);
}
console.log(reveals)
它很简单您所要做的就是设置不同的超时，并在作为参数传递给这个setTimeout(reference(的函数中随意更改样式
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
<script src="./script.js"></script>
</body>
</html>
style.css
#div1{
padding: 2rem;
background-color: grey;
font-weight: bold;
margin: 1rem;
transform: translateX(150%);
transition: all 0.5s ease-in-out;
}
#div2{
padding: 2rem;
background-color: pink;
margin: 1rem;
transform: translateX(150%);
transition: all 0.5s ease-in-out;
}
body{
overflow-x: hidden;
}
script.js
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
setTimeout(()=>{div1.style.transform = 'translateX(0)'},1000)
setTimeout(()=>{div2.style.transform = 'translateX(0)'},2000)