么是轮播图？

轮播图，顾名思义就是轮流播放的图片，常见领域比如电商网站，轮流播放热卖商品。或者在线教育平台，轮流播放相关课程封面。

overflow属性

比如，我们要实现一个相框功能，相框里面放入图片，但是图片大小不确定，可能会超出边框，所以对于超出部分可以选择隐藏处理或者加入滚动条。

将overflow设置为滚动：

overflow: scroll;

滚动条自动滚动

将滚动条拖动到顶部和底部，分别得到scrollTop属性值：

let container=document.getElementById("container");

setInterval(function(){
	console.log(container.scrollTop);
}, 1000);

自增scrollTop，实现滚动条循环滚动：

setInterval(function(){
	// console.log(container.scrollTop);
	container.scrollTop +=1;
	if(container.scrollTop >=428)
		container.scrollTop=0;
}, 10);

轮播图

要求：三张图片循环向左移动。为防止出现图像突然切换，一般把第一张图片和最后一张图片设置为同一张图。

<div id="photosWrap">
	<div id="photo">
		<img src="images/image7.jpg">
		<img src="images/image8.jpg">
		<img src="images/image9.JPEG">
		<img src="images/image7.jpg">
	</div>
</div>

<style>
	#photosWrap {
		width: 350px;
		height: 300px;
		margin: 40px auto;
		box-shadow: 0 0 5px black;
		overflow: hidden;
		position: relative;
	}
	#photo {
		width: 9999px;
		height: 300px;
		position: absolute;
		left: 0;
	}
	#photosWrap img {
		width: 350px;
		height: 300px;
		float: left;
	}

 </style>

<script>
	let photo=document.getElementById("photo");
	let album_maxWidth=1050;
	let album_l=photo.offsetLeft;
	setInterval(function (){
		album_l -=2;
		if (album_l <=-album_maxWidth){
			album_l=0;
		}
		photo.style.left=album_l + "px";
	},30);

</script>

视频讲解

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

相关推荐

• Javascript对象和选项卡实现
• Javascript简介和基础数据类型
• 一文详解Javascript定时器
• Javascript点击按钮控制图片切换
• Javascript在线刷题输入输出模板，学编程为什么要刷题？
• Javascript获取className属性和slice切片

者：Lydia Hallie
译者：前端小智
来源：dev

事件循环是什么，为什么要理解它？

JS 是单线程的:一次只能运行一个任务。通常这没什么大不了的，但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中，我们要等待30秒，然后才能执行接下来要做的事情(JS 默认运行在浏览器的主线程上，所以整个UI都卡住了)。

幸运的是，浏览器提供了 JS 引擎本身没有提供的一些特性:Web API。这包括DOM API、setTimeout、HTTP请求等等。这些 API 可以帮助我们创建一些异步的、非阻塞的行为。

当我们调用一个函数时，它被添加到调用堆栈中。调用堆栈是JS引擎的一部分，这不是浏览器特有的。堆栈里面的顺序是先进后出，当函数返回一个值时，它会从堆栈中弹出。

response函数返回一个setTimeout函数。setTimeout是由Web API提供的:它允许我们在不阻塞主线程的情况下延迟任务。我们传递给setTimeout函数的回调函数()=> {return 'Hey'}被添加到Web API中。与此同时，setTimeout函数和response函数从堆栈中弹出，它们都返回了它们的值。

在Web API中，计时器的运行时间与我们传递给它的第二个参数1000ms一样长。回调不会立即添加到调用堆栈中，而是会传递到队列中。

这可能是一个令人困惑的部分:它并不意味着在1000ms之后将回调函数添加到调用堆栈中，它只是在1000ms后添加到队列中。在队列，函数必须等待轮到它，才会执行。

现在，我们一直在等待事件循环完成其惟一的任务:将队列与调用堆栈连接起来。如果调用堆栈为空，那么如果之前调用的所有函数都返回了它们的值并已从堆栈中弹出，则队列中的第一项将添加到调用堆栈中。在本例中，没有调用其他函数，这意味着在回调函数成为队列中的第一项时，调用堆栈为空。

回调函数被添加到调用堆栈中，被调用，并返回一个值，然后从堆栈中弹出。

通过动画演示看起来是很有趣的，但还是需要重复多看几遍，才能更好理解它们之间的关系。现在来考验一下，如下代码所示，请说出执行的结果：

const?foo?=?()?=>?console.log("First");
const?bar?=?()?=>?setTimeout(()?=>?console.log("Second"),?500);
const?baz?=?()?=>?console.log("Third");

bar();
foo();
baz();

明白了吗?让我们快速查看一下在浏览器中运行这段代码时发生了什么

1.调用函数bar，bar返回setTimeout函数。

2.我们传递给setTimeout的回调被添加到Web API，setTimeout函数和bar从调用栈中弹出。

3.计时器运行，同时函数foo被调用并打印 First。foo返回，接着调用函数baz，并将回调添加到队列中。

4.函数baz打印Third，事件循环看到baz返回后，调用栈为空，然后将处理队列中的回调添加到调用栈中。

5. 回调函数打印 Second。

希望本文对你在事件循环上的理解有一定的帮助，咱们下篇见。

原文：https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif