javascript - Keraguan tentang gaya elemen mengawal 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();

Seperti yang ditunjukkan dalam kod di atas, setiap satu saat, slider_box meluncur 20% ke kiri (1 skrin), tetapi masalahnya datang, apabila ia meluncur ke 100%, ia tidak lagi boleh meluncur ke kiri (jika anda meluncur lebih jauh , tidak akan ada gambar), dan saya dalam Kesan yang dilihat oleh beberapa pemalam lain ialah setiap saat, gelongsor slider_box berubah daripada -20% kepada 0 dan kemudian kepada -20%. slider_box meluncur ke 100% dan kemudian meluncur semula, ia akan kehabisan kawasan Persoalannya, bagaimanakah pemalam ini mengendalikan perubahan slider_box dari -20% kepada 0 dan kemudian kepada -20% dalam kod di atas? , saya cuba mengosongkan gaya gelongsor terakhir dahulu, dan kemudian tetapkan gaya gelongsor kali ini:

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

Tetapi saya tidak dapat menyedari perubahan itu, dan ia tidak meluncur lagi Jadi untuk mencapai kesan yang sama seperti pemalam, bagaimana saya harus menanganinya di sini
Adakah kerana orang tidak mengikuti idea ini semua?
Pengenkapsulan kaedah js dalam pemalam Terlalu mendalam, saya minta maaf kerana saya benar-benar tidak memahaminya.
Satu lagi: Pautan pemalam: http://sc.chinaz.com/jiaoben/. ..

Answer 1

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

Answer 2

Kaedah asal anda baik, itu hanya pertimbangan anda test<5 但却一直把 test 加。所以把 test++ 改成 test = (test + 1) % 5 Ia sepatutnya baik.

Answer 3

Anda ingin mencapai karusel yang lancar? Secara umumnya, terdapat dua idea: 1. Kawal sifat bekas induk 2. Kawal sifat elemen anak, seperti kiri, margin transformX. Terdapat dua cara untuk mencapai kelancaran terlebih dahulu 1. Satu lagi gambar di hadapan dan belakang, dan gambar kedua dipaparkan semasa pemula lihat gambar kedua.
Anda boleh melihat karusel lancar mudah yang saya tulis tahun lepas, Karusel Mudah Mudah

Answer 4

Itu karusel lancar.

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

Sama seperti ini, tambahkan salinan di kepala dan ekor, serta putar ke kepala dan ekor sebenar (iaitu, img kedua dan img keenam kod saya), anda tambah jika penghakiman untuk menilai senarai anda .style adalah OK