Hello, everyone, I am Yin Dong, today with native JS to write you an infinite round cast effect.

The first step is to complete the static layout of the page.

<body>
	<div id="content">
		<ul>
			<li><img src="https://img.zcool.cn/community/01786260dd7d8e11013eaf7040f2a1.jpg" /></li>
			<li><img src="https://img.zcool.cn/community/01cde260dd1e8a11013f4720974375.png" /></li>
			<li><img src="https://img.zcool.cn/community/01896b60dd31b411013eaf70679d64.png" /></li>
		</ul>
	</div>
</body>
Copy the code

Then there is the CSS style of the page, which is not recommended * resetting margin and padding, let alone inefficient and useless.

Li will remove the list style, div, ul, img to give a location, will be used later.

* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

#content {
    min-width: 1000px;
    height: 487px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content ul {
    position: absolute;
    left: 0;
    width: 100%;
}

#content ul li {
    float: left;
    width: 25%;
}

#content ul li img {
    position: relative;
    left: 0;
    width: 100%;
    width: 1920px;
    display: block;
}
Copy the code

Here is to achieve a forward infinite scrolling, the implementation idea is very simple, first of all, the page layout of 3 pictures, respectively in Li. How critical is the time to scroll to third back to the first one, lazy, here will be first one copy in the end, into four, so 1 piece can smooth scrolling to 4 pieces, such as rolling over in adjust positioning to 1, the user is no sense, then roll is 1 and 2 pieces of rolling.

First get the elements you need in the page. What div, ul, li, img

var oDiv = document.getElementById('content');
var oUl = oDiv.getElementsByTagName('ul') [0];
var aLi = oUl.getElementsByTagName('li');
var aImg = oUl.getElementsByTagName('img');
Copy the code

And then I’m going to set two variables one for the default width of the image, and one for the scroll pointer which defaults to 0 which is the first image.

var imgWidth = 1920;
var iNow = 0;
Copy the code

Then use the Clone method to assign the first LI tag to the last bit, and then set the overall UL width.

oUl.appendChild(aLi[0].cloneNode(true));
// ul width Settings, put all images side by side
oUl.style.width = (aImg.length + 1) * imgWidth + 'px';
Copy the code

To fit the screen width, use the resize event to center the image. This is the difference between the screen width and the image width divided by 2, and then img is positioned relative to Li.

function toReSize() {
    var veiwWidth = document.documentElement.clientWidth;
    if (veiwWidth > 1000) {
        for (var i = 0; i < aImg.length; i++) {
            aImg[i].style.left = - (imgWidth - veiwWidth) / 2 + 'px';
        }
    }
}

toReSize();

window.onresize = toReSize;
Copy the code

Now we’re going to do the motion effect using the same move function that we did before.

Write a timer that increments the pointer by 1 each time and then sets the entire UL relative to the left.

setInterval(toRun, 3000);
function toRun() {
    iNow++;

    move(oUl, { left: - iNow * imgWidth }, function () {
        if (iNow === aLi.length - 1) {
            oUl.style.left = 0;
            iNow = 0; }}); }Copy the code

Attach a self-serve link: github.com/xiaoyindong…