Recently, js has been continuously strengthened and consolidated. After learning jq and vue, I found that many things are actually unknown. Therefore, some of the bottom things I don't understand, in the end, I just use them blindly. I have been using other people's things, which is not very helpful to my growth.

Ten thousand feet high rises rise on the ground, solid foundation, fast learning everything, and I feel like I have a little sense of achievement when I write with the original code. Now take note of the native js seamless carousel reviewed today.

Take a self portrait of the town building first, ha ha ha

First of all, let's talk about the idea. First of all, any picture is saved and displayed in the form of ul. Go to the code

		<div id="wrap">
			<ul id="ul">
				<li>
					<img src="http://img3.imgtn.bdimg.com/it/u=1135520735,2369294998&fm=200&gp=0.jpg">
				</li>
				<li>
					<img src="http://img2.imgtn.bdimg.com/it/u=695607252,2370769232&fm=200&gp=0.jpg">
				</li>
				<li>
					<img src="http://img4.imgtn.bdimg.com/it/u=4133407901,1533904167&fm=200&gp=0.jpg">
				</li>
				<li>
					<img src="http://img5.imgtn.bdimg.com/it/u=4083237979,1376579798&fm=26&gp=0.jpg">
				</li>
				<li>
					<img src="http://img2.imgtn.bdimg.com/it/u=1640379911,3259036309&fm=26&gp=0.jpg">
				</li>
			</ul>
		</div>

In the case of image rotation, I want the whole ul to move the display instead of changing the margin of li to the css code. Because a picture is set to 80px, the width of the container is 400.

            #wrap{
                width: 400px;
                height: 80px;
                overflow: hidden;
                margin-left: 500px;
                margin-top: 300px;
                position: relative;
            }
            #ul{
                position: absolute;
                left: 0;
                top: 0;
                width: 400px;
                font-size: 0;
                margin: 0;
                padding: 0;
            }

Then js code is very simple. Set a timer directly to let ul move right or left slowly. But there will be a problem. We will discuss it later, and attach the code first

window.onload = function(){
    var odiv = document.getElementById('wrap');
    var oul = document.getElementById('ul');
    setInterval(function(){
        oul.style.left = oul.offsetLeft + 5 +'px';
    },30)

But when the picture moves to the right, it can't turn back. The above code just makes the picture move to the left all the time. How to realize the first picture to be displayed again when the last picture moves to the left edge? It's very simple

For example, if the picture is displayed as 1, 2, 3 and 4, then we can't have one more picture. That is to say, 1, 2, 3, 4, 1, 2, 3 and 4. When the second group of pictures is displayed as 4, we will pull ul back

So the code can write like this

            var odiv = document.getElementById('wrap');
            var oul = document.getElementById('ul');
            var oli = oul.getElementsByTagName('li');
            oul.innerHTML = oul.innerHTML + oul.innerHTML;//Splicing li, because the picture may be any one
            oul.style.width = oli[1].offsetWidth * oli.length + 'px';//The width of ul is equal to the sum of the width of all pictures
        setInterval(function(){
            if (oul.offsetLeft < -oul.offsetWidth/2) {
                oul.style.left = 0;//If ul has already shown a group, half the width, pull it back and rerun it
            }else{
                oul.style.left = oul.offsetLeft - 2 +'px';
            }
        },30);

This is done, and you can copy the code to see the effect in the browser.