javascript – Zweifel am JS-Steuerelementstil

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();

Wie im obigen Code gezeigt, gleitet die slider_box jede Sekunde um 20 % nach links (1 Bildschirm), aber das Problem tritt auf, wenn sie auf 100 % gleitet, kann sie nicht mehr nach links gleiten (wenn Sie weiter gleiten). , es wird kein Bild angezeigt), und ich bin dabei. Der Effekt, den einige andere Plug-Ins beobachten, besteht darin, dass sich der Schieberegler von slider_box jede Sekunde von -20 % auf 0 und dann auf -20 % ändert Wenn slider_box auf 100 % gleitet und dann wieder gleitet, verlässt es den Bereich. Die Frage ist, wie diese Plug-Ins mit der Änderung von slider_box von -20 % auf 0 und dann auf -20 % umgehen , ich habe zuerst versucht, den letzten Schiebestil zu löschen und dann dieses Mal den Schiebestil festzulegen:

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();

Aber ich kann die Änderungen nicht erkennen und es gleitet nicht mehr. Wie soll ich hier damit umgehen, um den gleichen Effekt zu erzielen?
Liegt es daran, dass die Leute dieser Idee nicht folgen? Alles?
Die Kapselung der js-Methode im Plug-in ist zu tiefgreifend, es tut mir leid, dass ich es wirklich nicht verstehe.
Anderer: Plug-in-Link: http://sc.chinaz.com/jiaoben/. ..

Answer 1

动一下就把第一个li apend到最后

Answer 2

你原来的方式没问题的，只是你判断了 test<5 但却一直把 test 加。所以把 test++ 改成 test = (test + 1) % 5 应该就行。

Answer 3

你是想实现无缝轮播吧。一般来说 2种思路 1.控制父容器的属性 2.控制子元素的属性 比如left，transformX margin 。先要实现无缝 也有2种思路 1.前后各多一张图片，初始化显示第2张图片
2.不多图片，初始化显示第二张图片，不过呢 用户看到的永远都是第二个位置。
可以看我去年写的一个简单的无缝轮播 简易无缝轮播

Answer 4

那个就是无缝轮播。

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

就像这样，在头尾各添加一个副本，再加上轮播到真正的头尾（即是我代码的第二个img和第六个img），你加上if判断，判断你的list.style就OK了