、什么是JavaScript中的window？

JavaScript中window是一个全局对象，代表浏览器中一个打开的窗口，每个窗口都是一个window对象。

2、什么是document？

document是window的一个属性，这个属性是一个对象；

document代表当前窗口中的整个网页；

document对象保存了网页上所有的内容，通过document对象就可以操作网页上的内容。

3、什么是JavaScript中的DOM？

DOM定义了访问和操作HTML文档(网页)的标准方法；

DOM全称：Document Object Model，即文档模型对象；

学习DOM就是学习如何通过document对象操作网页上的内容。

4、JavaScript中如何通过选择器获取DOM元素？

querySelector：只会返回根据指定选择器找到的第一个元素，例子：

let oDiv = document.querySelector("div");

console.log("oDiv"); //输出：<div></div>

querySelectorAll：会返回指定选择器找到的所有元素，例如：

let oDivs = document.querySelectorAll("div");

console.log("oDivs"); //输出：NodeList由所有div元素组成的为数组。

5、JavaScript如何获取和设置元素内容？

获取元素内容：

1）innerHTML获取的内容包含标签，innerText/textContent获取的内容不包含标签；

2）innerHTML/textContent获取的内容不会去除两端的空格，innerText获取的内容会去除两端的空格。

设置元素内容：

共同点：无论通过innerHTML/innerText/textContent设置内容，新的内容都会覆盖原有的内容；

区别：1）通过innerHTML设置数据，数据中包含标签，会转换成标签之后再添加；

2）通过innerText/textContent设置数据，数据中包含标签，不会转换成标签，会当做一个字符串直接设置。

6、什么是JavaScript中的事件？ 如何给元素绑定事件？

用户和浏览器之间的交互行为被称为事件，比如：鼠标的点击/移入/移出。

在JavaScript中所有的HTML标签都可以添加事件；

元素.事件名称 = function(){}；

当对应事件被触发时候就会自动执行function中的代码。

掌握了以上JavaScript，就可以做某宝里面的轮播图片了！

么是轮播图？

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

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://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

相关推荐

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