JS手写一款简单轮播海报-一一网

大家好，我是隐冬，今天用原生js给大家写一个无限轮播的效果。

首先还是完成页面的静态布局。

<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>
复制代码

然后是页面的css样式, 这里用了不推荐的*重置margin和padding，别说效率低好用就完了。

li要去掉列表样式，div、ul、img分别给个定位，后面会用到。

* {
    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;
}
复制代码

这里是要实现一个正向的无限滚动，实现思路很简单，首先页面布局了3张图片，分别放在li里面。关键的是滚动到第3张的时候如何回到第1张，这里偷懒了一下，将第1张复制到最后，变成4张，这样第1张就可以平滑的滚动到第4张了，等滚动完毕在将定位调整到第1张，用户是无感知的，然后再滚动就是第1张和第2张的滚动了。

首先获取页面中需要的元素, 什么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');
复制代码

然后设置两个变量一个表示图片的默认宽度，一个是滚动的指针默认为0也就是第一张。

var imgWidth = 1920;
var iNow = 0;
复制代码

然后使用clone方法将第一个li标签赋值到最后一位，然后再设置整体的ul宽度。

oUl.appendChild(aLi[0].cloneNode(true));
// ul宽度设置，将所有的图片并排
oUl.style.width = (aImg.length + 1) * imgWidth + 'px';
复制代码

为了适应屏幕宽度，使用resize事件，调整图片，让图片居中。也就是屏幕宽度与图片宽度的差值除以2，然后给img相对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;
复制代码

接下来就是运动效果了同样用到了之前的move函数。

编写一个定时器每次让指针加1，然后设置整个ul相对左边的定位就可以啦。

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

    move(oUl, { left: - iNow * imgWidth }, function () {
        if (iNow === aLi.length - 1) {
            oUl.style.left = 0;
            iNow = 0;
        }
    });
}
复制代码