How can I loop this animation forever?
Question
Good day to everyone. I am learning javascript. I know these codes I have written are not the best of codes. I am more interested in getting my codes to work at this stage. So, I have three images I setup in HTML and styled with css.
I simply want the images to move to certain positions 3 seconds after page load and slide back to their initial positions 3 seconds interval. The problem now is that I will like to make this repeat every 3 seconds as long as the user is on the page. Here is what I have written:
Currently, the images actually slide how I want them to but I don't know how to make this happen over and over again.
var section5slidersa = document.getElementById("section5slidersa"); var section5slidersb = document.getElementById("section5slidersb"); var section5slidersc = document.getElementById("section5slidersc"); var interval = 2000; setInterval(() => { section5slidersa.style.left = " -500px"; section5slidersb.style.left = "-500px"; section5slidersc.style.left = "540px"; setInterval(() => { section5slidersc.style.left = "1190px"; section5slidersb.style.left = "0px"; section5slidersa.style.left = " 0px"; }, interval); }, interval);
.section5container{ position: absolute; width: 80vw; height: 100vh; overflow: hidden; }.section5slides{ display: grid; grid-template-columns: 500px 500px 500px; gap: 20px; position: absolute; left: 210px; top: 170px; }.section5sliders{ background: #111924; height: 220px; }.section5sliders img{ width: 200px; height: 180px; position: relative; top: 5px; }.imgbg{ background: #98ACB5; width: 190px; height: 180px; position: relative; top: 20px; left: 20px; } #section5slidersa { position: relative; left: 0px; transition: .8s ease-out; } #section5slidersb { position: relative; left: 0px; transition: .8s ease-out; } #section5slidersc { position: absolute; width: 500px; left: 1190px; transition: .8s ease-out; } <div class="section5container"> <div class="section5slides"> <div class="section5sliders" id="section5slidersa" <div class="imgbg"><img src="https://www.freeimages.com/photo/hand-in- action-aiming-1-1431523" id="section5imga" alt=""></div> </div> <div class="section5sliders" id="section5slidersb"> <div class="imgbg"><img src="https://www.freeimages.com/photo/frog-on- chain-link-fence-1560508" id="section5imgb" alt=""></div> </div> <div class="section5sliders" id="section5slidersc"> <div class="imgbg"><img src="https://www.freeimages.com/photo/chain- 1446690" id="section5imgc" alt=""></div> </div> </div> </div>
1 answers
solution1
0 ACCPTED 2021-03-20 15:41:49
Let's first split the slides into two functions, slideLeft and slideRight.
In slideLeft, we want to call slideRight after interval ms after it finishes. In slideRight, we want to call slideLeft after interval ms after it finishes. We can solve this by adding setTimeout(otherFunction, interval) to the bottom of each function.
Finally, we can call slideLeft() to begin the animation
var section5slidersa = document.getElementById("section5slidersa"); var section5slidersb = document.getElementById("section5slidersb"); var section5slidersc = document.getElementById("section5slidersc"); var interval = 2000; slideLeft(); function slideLeft() { section5slidersa.style.left = " -500px"; section5slidersb.style.left = "-500px"; section5slidersc.style.left = "540px"; setTimeout(slideRight, interval); } function slideRight() { section5slidersc.style.left = "1190px"; section5slidersb.style.left = "0px"; section5slidersa.style.left = " 0px"; setTimeout(slideLeft, interval); }
#section5slidersa { position: relative; left: 0px; transition: .8s ease-out; } #section5slidersb { position: relative; left: 0px; transition: .8s ease-out; } #section5slidersc { position: absolute; width: 500px; left: 1190px; transition: .8s ease-out; }
<:doctype html> <html> <body> <img id="section5slidersa" src="https.//via.placeholder:com/150"> <img id="section5slidersb" src="https.//via.placeholder:com/150"> <img id="section5slidersc" src="https.//via.placeholder.com/150"> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.