js 实现横向滚动无缝轮播并中间暂停

无缝轮播实现思路：

css样式布局:

	<div class="img">
			<div class="wrap">
				<img src="images/pic1.png" alt="">
				<img src="images/pic2.png" alt="">
				<img src="images/pic3.png" alt="">
				<img src="images/pic4.png" alt="">
				<img src="images/pic5.png" alt="">
				<img src="images/pic1.png" alt="">
			</div>
		</div>

img(class)绝对定位，宽高为显示图片尺寸大小

wrap绝对定位，flex布局，宽高为600%

总结：

（1）因为wrap使用绝对定位，所以只需要将其left属性进行改变就能实现轮播；
（2）wrap里面是6张图片，这6张图片第一张和最后一张图片是相同的，因为我们要实现第五张图片往左滚动的同时，后面不会出现空白（最后可以删除最后一张图片进行对比），所以必须加一张图片，加第一张图片能衔接很自然；
（3）使wrap盒子的left属性值递减，那么wrap盒子将往左边移动，当减到第5张图片的时候left属性设置为0，跳转到第1张图片的位置，无缝滚动衔接成功；

功能实现：

<script type="text/javascript">
			var wrap = document.getElementsByClassName('wrap')[0];
			var Num = 1;   //计数
			var Speed = -2；//图片移动速度

			function run() {
				wrap.style.left = Speed * Num + 'px';
				Num++;
				if (parseInt(wrap.style.left) % 600 == 0) {
					if (parseInt(wrap.style.left) <= -3000) { //向左移动到第五张时
						wrap.style.left = 0;
						Num = 1
					}
					clearInterval(timer); //清楚定时器
					setTimeout(function() { //一次性定时器实现暂停
						timer = setInterval(run, 20)
					}, 1000)

				}
			}
			var timer = setInterval(run, 20)
		</script>

最终效果:

 第二篇，继续加油！