Using java Script How Can I show this 3 images loop perfectly work? - Jquery

user20127304
September 30, 2022
163 views
3 votes
5 Answers

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&para 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>

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 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 class="testimonial">
            <div class="users">     
                <div class="hellouser user" 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 user" 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 user" 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>

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 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>

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 class="testimonial">
        <div class="users">
            <div data-show="true" class="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 hidden data-show="false" class="hellouser">
                <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 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" class="hellouser">
                <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 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>

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 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="hellouser" 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="hellouser" 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>

<!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 class="testimonial">
        <div class="users">
            <div class="mySlides" 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="mySlides" 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 dummytext ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing 
                    </p>
                </div>
            </div>
            <div class="mySlides" 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>
    <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>

Please signup or login to give your own answer.

Click here to cancel reply.

Using java Script How Can I show this 3 images loop perfectly work? – Jquery

Answers