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 >
<div >
<div 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="" />
<div >
<p >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 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="" />
<div >
<p >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 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="" />
<div >
<p >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>CodePudding user response：
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 with display: none except the target image with display: unset, and increase the index by one on each iteration, and when the index equal or more than the images length reset the index to zero.
const users = document.querySelectorAll(".user");
let index = 0;
const handleChange = () => {
if (index >= users.length) {
index = 0;
}
users.forEach((user) => (user.style.display = "none"));
users[index].style.display = "unset";
index ;
};
setInterval(handleChange, 4500);
handleChange().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 >
<div >
<div 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="" />
<div >
<p >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 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="" />
<div >
<p >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 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="" />
<div >
<p >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>CodePudding user response：
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.
setInterval(testimonial, 4500);
function testimonial(){
setTimeout(() => {
const box = document.getElementById('hellouser');
const rain = document.getElementById('hellouser1');
box.style.display = 'none';
rain.style.display = 'block';
}, 1500);
setTimeout(() => {
const rain = document.getElementById('hellouser1');
const rainbow = document.getElementById('hellouser2');
rain.style.display = 'none';
rainbow.style.display = 'block';
}, 3000);
setTimeout(() => {
const rainbow = document.getElementById('hellouser2');
const box = document.getElementById('hellouser');
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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 >
<div >
<div 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="" />
<div >
<p >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 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="" />
<div >
<p >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 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="" />
<div >
<p >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>CodePudding user response：
Here You go
function showUser() {
let users = document.querySelectorAll('.hellouser');
let count = 0;
setInterval(() => {
users.forEach(user => {
user.hidden = true;
user.dataset.show = false;
});
users[count].hidden = false;
users[count].dataset.show = true;
count ;
if (count > users.length - 1) {
count = 0;
}
}, 3000);
}
showUser() .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;
} <div >
<div >
<div data-show="true" >
<img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="" />
<div >
<p >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 hidden data-show="false" >
<img src="https://images.pexels.com/photos/8095733/pexels-photo-8095733.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="" />
<div >
<p >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 hidden data-show="false" >
<img src="https://images.pexels.com/photos/1065084/pexels-photo-1065084.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="" />
<div >
<p >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>
</div>CodePudding user response：
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.
.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 {
width: 100px;
height: 100px;
border-radius: 500px;
align-items: center;
}
.hellouser {
animation: show 3s linear infinite;
position: absolute;
opacity: 0;
}
#hellouser1 {
animation-delay: 1s;
}
#hellouser2 {
animation-delay: 2s;
}
@keyframes show {
0%,
33.332% {
opacity: 1;
}
33.333%,
100% {
opacity: 0;
}
}
.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 >
<div >
<div 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="" />
<div >
<p >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 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="" />
<div >
<p >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 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="" />
<div >
<p >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>CodePudding user response：
<!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>
<style>
.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;
}
</style>
</head>
<body>
<div >
<div >
<div 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="" />
<div >
<p >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 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="" />
<div >
<p >Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummytext ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing
</p>
</div>
</div>
<div 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="" />
<div >
<p >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>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i ) {
slides[i].style.display = "none";
}
slideIndex ;
if (slideIndex > slides.length) { slideIndex = 1 }
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>