原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画

offset家族的了解

1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。检测盒子的高度，包括padding和border；不包括margin
2. offsetWidth:是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。检测盒子的宽度，包括padding和border；不包括margin
3. offsetParent:是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素.
4. offsetLeft:是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。返回距离定位盒子左侧的边界，没有定位父系盒子没有则返回，距离左侧(body)的位置
5. offsetTop:为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

实现无缝滚动匀速轮播图函数的封装

我们移动轮播图，其实就是实现控制装每个轮播图(一般情况是li)的最外层盒子的移动(一般情况是ul)

实现盒子匀速移动到指定位置

<style>
		.box1{
    
			position: relative;
		}
		.box2{
    
			position: absolute;
			width: 100px;
			height: 100px;
			background: red;
			margin-top: 20px;
		}
</style>
<div class="box1">
	<button class="btn1">移动到400的位置</button>
	<button class="btn2">移动到800的位置</button>
	<div class="box2"></div>
</div>

利用定时器和offsetLeft来实现匀速运动

1. 使用定时器每段时间走一定的步数(step:10)
2. 当盒子向右走step为正，当盒子向左走step为负数(目标位置和当前盒子位置比较)
3. 开启定时器
4. 当目标位置和当前位置的距离相等或则小于要走的步数，清除定时器，直接跳到目标位置
5. 每次开启定时器之前先清除定时器，防止多次调用定时器

function animate(el,target){
   
		// 每次调用函数要先清除定时器，防止多次点击时会开启多个定时器，影响匀速运动
		clearInterval(el.timer)
		// 每次让盒子走十步
		// var step = 10
		// 因为要考虑向右走还是向左走，所以step要根据当前位置和目标位置取正负
		var current = el.offsetLeft
		var step = target-current>0?10:-10;
		el.timer = setInterval(function(){
   
			// 每次重新获取盒子当前位置
			current = el.offsetLeft
			// 每次走十步
			el.style.left = current + step + 'px'
			// 当前位置和目标位置的距离小于要走的步数距离.直接让其走到目标位置
			// 防止超过目标位置，接着清除定时器
			if(Math.abs(target-current)<Math.abs(step)){
   
				el.style.left = target + 'px'
				clearInterval(el.timer)
			}
		}, 10)
	}

style.left和offsetLeft

style.left可读可写，offsetLeft只读，我们为什么不使用style.left，而要使用offsetLeft来获取盒子的当前位置?

• style.left只能获取行内样式的定位

<div class="box2" style="left: 10px"></div>

• offsetLeft可以返回没有定位盒子的距离左侧的位置,style.left没有定位盒子，返回的是""
• style.left返回的是字符串，offsetLeft返回的是number

实现无缝滚动轮播图

注：开发过程中可以将.slider的overflow:hidden的css样式去掉

<div class="all" id='box'>
    <div class="slider">
        <ul>
            <li><img src="img/banner1.jpg" alt="slider" width="590px" height="470px" /></li>
            <li><img src="img/banner2.jpg" alt="slider" width="590px" height="470px" /></li>
            <li><img src="img/banner3.jpg" alt="slider" width="590px" height="470px" /></li