here is my code HTML-CSS-js based I want to design 3 of this div that appear and hide in 3-5 sec in a loop after the first run it repeats execution again how can I fix my code? to work these three image-para div work perfectly in a loop using js.
I want to design this "3 image¶ div" executed in loop one by one continuously using js. how can I fix this code? what should I use to make this concept clear?
is there any other option to solve this error?
setInterval(testimonial, 3000);
function testimonial(){
setTimeout(() => {
const box = document.getElementById('hellouser');
box.style.display = 'none';
}, 1000);
setTimeout(() => {
const rain = document.getElementById('hellouser1');
rain.style.display = 'block';
}, 1000);
setTimeout(() => {
const rainbow = document.getElementById('hellouser2');
const rain = document.getElementById('hellouser1');
rain.style.display = 'none';
rainbow.style.display = 'block';
}, 3500);
setTimeout(() => {
const rainbow = document.getElementById('hellouser2');
const rain = document.getElementById('hellouser1');
const box = document.getElementById('hellouser');
rain.style.display = 'none';
rainbow.style.display = 'none';
box.style.display = 'block';
}, 4500);
}
.outer-circle{
position: relative;
border: 2px solid #c5c5c5;
height:400px;
width:400px;
border-radius: 500px;
}
.inner-circle{
height: 200px;
width: 200px;
border: 2px solid #c5c5c5;
position: absolute;
top:99px;
left:99px;
border-radius: 500px;
}
.users{
position: absolute;
}
.helloimage, .hellouser1{
width:100px;
height:100px;
border-radius: 500px;
align-items: center;
}
.hellouser1, .hellouser2{
display: none;
}
.test-content{
width: 500px;
}
<!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>
</head>
<body>
<div class="testimonial">
<div class="users">
<div class="hellouser" id="hellouser">
<img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage"/>
<div class="test">
<p class="test-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
</div>
</div>
<div class="hellouser1" id="hellouser1">
<img src="https://images.pexels.com/photos/8095733/pexels-photo-8095733.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
<div class="test">
<p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
</div>
</div>
<div class="hellouser2" id="hellouser2">
<img src="https://images.pexels.com/photos/1065084/pexels-photo-1065084.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
<div class="test">
<p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
</div>
</div>
</div>
</div>
</body>
</html>
5
Answers
You can get all users’ content, then set the index of the image you want to show at the moment, and in the
setInterval
hide all images withdisplay: none
except the target image withdisplay: unset
, and increase theindex
by one on each iteration, and when theindex
equal or more than the imageslength
reset the index to zero.Your interval is 3000 ms, while two of your timeouts are 3500 and 4500ms, respectively.
Your timeouts have to be shorter than the interval period.
Here You go
You could take a slightly alternative approach and use CSS animations instead of JS.
This snippet has an animation time of 3 seconds. Each hellouser element is set to have opacity 1 for one third of the animation time. The second and third of these elements have their animation delayed by one and two seconds repsctively.