javascript - Doubts about js controlling element style

Question

/*css*/
ul,li{
        margin: 0;
        padding: 0;
    }
    .slider{
        width: 100%;
        height: 300px;
        overflow: hidden;
    }
    .slider_box{
        width: 500%;
        height:100%;
        transition: all 0.3s;
    }
    .slider_box>ul{
        width: 100%;
        height:100%;
        white-space: nowrap;
    }
    .slider_box>ul>li{
        display: inline-block;
        width: 20%;
        height: 100%;
    }
    .slider_box>ul>li:nth-of-type(0){
        background: #000088;
    }
    .slider_box>ul>li:nth-of-type(1){
        background: #004444;
    }
    .slider_box>ul>li:nth-of-type(2){
        background: #221199;
    }
    .slider_box>ul>li:nth-of-type(3){
        background: #AA1111;
    }
    .slider_box>ul>li:nth-of-type(4){
        background: #E38D13;
    }

/*html*/
<p class="slider">
    <p class="slider_box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>
</p>

/*js*/
var list = document.getElementsByClassName("slider_box")[0];
    var arr = list.children;
    var test = 0;
    function slide(){
        if(test<5){
        list.style.transform = "translateX(-"+test*20+"%)";
        test++;
        setTimeout("slide()",1000);
        }    
        }
    slide();

As shown in the above code, every one second, the slider_box slides 20% to the left (1 screen), but the problem comes, when it slides to 100%, it can no longer slide to the left (if you slide further, there will be no picture), and The effect I saw in some other plug-ins is that every one second, the sliding of slider_box changes from -20% to 0 and then to -20%. In this way, the processing will not exist. When the slider_box slides to 100% and then slides again, it will run out. The problem is the area, so the question is how do these plug-ins handle the change of slider_box from -20% to 0 and then to -20%? In the above code, I tried to clear the last sliding style first, and then set this sliding style. style:

function slide(){
        list.style.transform = "translateX(-20%)";
        if(test<5){
//            list.style.transform = "translateX(-"+test*20+"%)";
            list.style.transform = "translateX(0)";
            test++;
            setTimeout("slide()",1000);
        }    
        }
    slide();

But I can't realize the changes, and it doesn't slide anymore. So to achieve the same effect as the plug-in, how should I deal with it here?
Is it because people don't follow this idea at all?
The js method in the plug-in is too encapsulated, so I’m sorry that I really don’t understand it.
Another: plug-in link: http://sc.chinaz.com/jiaoben/...

Answer 1

Just move and apend the first li to the end

Answer 2

There is nothing wrong with your original method, but you judged test<5 but kept adding test. So changing test++ to test = (test + 1) % 5 should work.

Answer 3

You want to achieve seamless carousel? Generally speaking, there are two ideas: 1. Control the properties of the parent container 2. Control the properties of the child elements, such as left, transformX margin. There are two ways to achieve seamlessness first. 1. One more picture at the front and back, and the second picture is displayed during initialization. 2. There are not many pictures. The second picture is displayed at initialization, but the user will always see the second picture. Location.
You can see a simple seamless carousel I wrote last year, Simple Seamless Carousel

Answer 4

That is seamless carousel.

    <p  style="left: -600px;">
        <img src="image/5.jpg" alt="1"/>
        <img src="image/1.jpg" alt="1"/>
        <img src="image/2.jpg" alt="2"/>
        <img src="image/3.jpg" alt="3"/>
        <img src="image/4.jpg" alt="4"/>
        <img src="image/5.jpg" alt="5"/>
        <img src="image/1.jpg" alt="5"/>
    </p>

Just like this, add a copy at the head and tail, plus rotate to the real head and tail (that is, the second img and sixth img of my code), you add an if judgment to judge your list .style is OK