javascript - Doutes sur le style d'élément de contrôle js

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

Comme le montre le code ci-dessus, toutes les secondes, la slider_box glisse de 20% vers la gauche (1 écran), mais le problème vient, lorsqu'elle glisse à 100%, elle ne peut plus glisser vers la gauche (si vous glissez plus loin , il n'y aura pas d'image), et je suis dans L'effet observé par certains autres plug-ins est que toutes les secondes, le glissement de slider_box passe de -20% à 0 puis à -20%. le slider_box glisse à 100 % puis glisse à nouveau, il sortira de la zone. Le problème est de savoir comment ces plug-ins gèrent le changement de slider_box de -20 % à 0 puis à -20 % dans ce qui précède ? code, j'ai d'abord essayé d'effacer le dernier style de glissement, puis de définir le style de glissement cette fois :

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

Mais je n'arrive pas à me rendre compte des changements, et ça ne glisse plus. Alors pour obtenir le même effet que le plug-in, comment dois-je gérer cela ici
Est-ce parce que les gens ne suivent pas cette idée ? tout ?
L'encapsulation de la méthode js dans le plug-in C'est trop profond, je suis désolé de ne pas vraiment comprendre.
Autre : Lien du plug-in : http://sc.chinaz.com/jiaoben/. ..

Answer 1

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

Answer 2

Votre méthode originale est bonne, c'est juste votre jugement test<5 但却一直把 test 加。所以把 test++ 改成 test = (test + 1) % 5 Ça devrait aller.

Answer 3

Vous souhaitez réaliser un carrousel fluide ? De manière générale, il y a deux idées : 1. Contrôler les propriétés du conteneur parent 2. Contrôler les propriétés des éléments enfants, tels que la marge gauche et transformX. Il existe deux manières d'obtenir une transparence : 1. Une image supplémentaire à l'avant et à l'arrière, et la deuxième image est affichée lors de l'initialisation. 2. Il n'y a pas beaucoup d'images lors de l'initialisation, mais l'utilisateur le fera toujours. voir la deuxième photo.
Vous pouvez voir un simple carrousel sans couture que j'ai écrit l'année dernière, Simple Seamless Carousel

Answer 4

C'est un carrousel transparent.

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

Juste comme ça, ajoutez une copie en tête et en queue, et faites pivoter vers la vraie tête et la queue (c'est-à-dire la deuxième img et la sixième img de mon code), vous ajoutez si vous jugez votre liste. Le style est OK