Seeing the title, I think many of you should have the same doubts as me. What should we do without a timer? After all, it’s so common to use setInterval to control image switching in seamless rotations that if you do a web search, you’ll almost always see something like this.
timerID = setInterval(function () {
// Getting its current position requires that both child and parent elements be positioned
var current = dom.offsetLeft;
// Move distance minus current distance, advance 10px each time until reached, then stop timer
if (Math.abs(target - current) > 10) {
current += target > current ? 10 : - 10;
// Assign to left
dom.style.left = current + "px";
} else {
dom.style.left = target + "px";
}
if (current == target) {
clearInterval(timerID);
}
}, 10);
Copy the codeFor example, elementUi is a transform that controls child elements. Unfortunately, the old version is buggy and I don’t have a good solution. As for the new Plus version, I haven’t read it yet, so I won’t comment on it. For the sake of subsequent explanation, put the complete code first
The cause of
There was a page in the project that involved a lot of setInterval API, which led to some unexpected problems. Our boss was very angry and said that we should not allow this API to appear in the project and replace everything involved. After that, I was in charge of the round cast image, which made me feel embarrassed. After all, I copied all the code in this part. I only changed the style, so I had no choice but to search for it (it was impossible to write code, never in my life, I had to make ends meet with the CV guy’s code).
after
After two hours of fruitless searching, the thought flashed through my mind: If the page is stuck, it will not affect the CSS animation. After all, these two guys are not in the same thread.
The results of
So I had an idea in my mind. First I cloned the first box, put it in the last box, and then transform the parent box. When I got to the last box, I went to the second box, as shown in the picture below:
Since it’s a CSS animation, I’m going to show the CSS first
.is-animating{
transition: all 0.8 s;
}
Copy the codeThe specific operation part is as follows
- Step 1: Initialize the content with the following HTML
<div id="container">
<div class="button">
<div class="pre"></div>
<div class="next"></div>
</div>
<ul class="list is-animating" style="height: 400px;">
<li>0<img src=".. /img1.image"></li>
<li>1<img src=".. /img2.image"></li>
<li>2<img src=".. /img3.image"></li>
<li>3<img src=".. /img4.image"></li>
</ul>
</div>
Copy the codeThe main JS are as follows
const width = 500// Width of the image
const lists = document.querySelector(".list")
Copy the code- Step 2: For each step forward, subtract one image width from the transform attribute value translateX until the last image
const left = -current * width
lists.style.transform = `translateX(${left}px)`;
Copy the code- Step 3: Add judgment. When you get to the last one, remove the animation effect and change the value of translateX to 0. After that, add the animation and change the position of translateX to the specified position
Insert a delay and let the translateX(0px) run out, otherwise seamless rotation will fail
To avoid this, add a delay until the previous translate completes.
lists.classList.remove("is-animating")
lists.style.transform = `translateX(${-max * width}px)`;
setTimeout((a)= > {
lists.classList.add("is-animating")
translate(current)
handleDot(current)
}, 0)
Copy the codeWhen added, it becomes normal, as shown below
The above is all the content of this share, if there is a better way to achieve, welcome to clap brick!