search

Home  >  Q&A  >  body text

javascript - Doubts about js controlling element style

/*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/...

伊谢尔伦伊谢尔伦2721 days ago824

reply all(4)I'll reply

  • 三叔

    三叔2017-07-05 10:41:55

    Just move and apend the first li to the end

    reply
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-07-05 10:41:55

    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.

    reply
    0
  • typecho

    typecho2017-07-05 10:41:55

    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

    reply
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-07-05 10:41:55

    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

    reply
    0
  • Cancelreply