1.javascript基础
2.DOM
2.1DOM简介
文档对象模型（Document Object Model ,简称DOM）是W3C组织推荐的处理可扩展标记语言的标准编程接口。
W3C定义了一系列的DOM接口，通过这些接口可以改变网页的内容、结构和样式。
DOM树
文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中的所有标签都是元素，DOM中使用element表示。
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。DOM把以上内容都看作对象。
2.2获取元素
如何获取元素呢？
根据ID获取
使用document.getElementById(“id”)方法可以获取带有ID的元素对象
根据标签名获取
使用document.getElementByTagName()方法可以返回带有指定标签名的对象的集合
<html>
<head>
<title>根据ID获取 根据标签名获取</title>
</head>
<body>
<ul>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
</ul>
<ul id="nav">
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
</ul>
<script>
/*1.返回的是获取元素对象集合 以伪数组的形式储存的*/
var lis=document.getElectmentsByTagName("li");
console.log(lis);
console.log(lis[1]);
/*2.我们要依次打印里面的元素，可以采用遍历的方式*/
for(int i=0;i<lis.length;i++){
console.log(lis[i]);
}
/*3.Element.getElementByTagName()可以得到元素里面的某个标签*/
var nav=document.getElementById("nav");
var navlis=nav.getElementByTagName("li");
console.log(lis);
</script>
</body>
</html>
通过HTML5新增方法获取
使用document.getElementByClassName("类名")方法可以根据类名返回对象集合。
使用document.querySelector("选择器")返回第一个元素对象
<html>
<head>
<title></title>
</head>
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>产品</li>
<li>首页</li>
</ul>
</div>
<script>
/*1.根据类名选择集合元素getElementsByClassName()*/
var boxs=document.getElementByClassName("box");
console.log("boxs");
/*2.`document.querySelector("选择器")返回指定选择器的第一个元素对象*/
var boxs=document.queryselector(".box");
console.log("boxs");
var boxs=document.queryselector("#nav");
console.log("boxs");
var li=document.queryselector("li");
console.log("li");
/*3.document.querySelectorAll() 返回指定选择器的全部*/
var allbox=document.querySelectorAll(".box");
console.log("allbox");
var lis=document.querySelectorAll("li");
console.log("lis");
</script>
</body>
</html>
特殊元素获取
获取body元素
document.body //返回body元素对象
获取html元素
document.documentElement //返回html元素对象
2.3事件基础
执行事件的步骤：
<1>获取事件源
var div=document.query("div")
<2>注册事件（绑定事件）
div.onclick
<3>添加事件处理程序
div.οnclick=function(){
console.log("我被选中了");
}
2.4操作元素
JavaScript的DOM操作可以改变网页内容、结构与样式，我们可以利用DOM操作元素来改变元素里面操作的内容、属性等。
2.4.1改变元素内容
element.innertext 去除空格和换行
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。
element.innerHTML 保留空格和换行
从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。
innertext 和innerHTML区别是：innertext不识别html标签，而innerHTML识别html标签。
2.4.2常用元素的属性操作
innertext innerHTML改变元素内容
src href
id alt title
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="image/ldh.jpg" alt="">
<script>
/*1.获取元素*/
var ldh=document.getElementById("ldh");
var zxy=document.getElementById("zxy");
var img=document.querySelector("img");
/*2.注册事件*/
zxy.οnclick=function(){
img.src="image/zxy.jpg";
img.title="张学友史密达";
}
ldh.οnclick=function(){
img.src="image/ldh.jpg";
img.title="刘德华史密达";
}
</script>
</body>
2.4.3表单元素属性操作
利用DOM可以操作如下表单元素的属性：type value checked selected disabled。
<body>
<button>按钮</button>
<input type="text" value="">
<script>
/*1.获取元素*/
var btn=document.querySelector("button");
var input=document.querySelector("input");
/*2.注册事件 处理事件*/
btn.οnclick=function() {
input.innerHtml="点击了";
input.value="被点击了";
/*表单禁用*/
btn.disabled=true;
}
</script>
</body>
2.4.4样式属性操作
通过JS可以修改元素的大小、颜色、位置等样式。
<1>element.style 行内样式操作
<2>element.className 类名样式操作
注意：1.如果样式太多，可以采取操作类名方式更改类名样式。
2.class是个保留字，因此使用className来操作元素类名属性。
3.className会直接更改元素的类名，会覆盖原先的类名。
<html>
<head>
<title></title>
<style>
.first {
width:400px;
height:400px;
background-color:pink;
}
.change {
width:00px;
height:400px;
background-color:red;
margin-top:100px;
}
</style>
</head>
<body>
<div class="first">文字</div>
<script>
/*获取元素*/
var div=document.querySelector("div");
/*注册事件 处理事件*/
div.οnclick=function() {
// div.style.backgroundColor:red;
// div.style.width:600px;
this.className="first change";
}
</script>
</body>
</html>
2.4.5自定义属性的操作
1.获取属性值
element.属性 获取属性值。
element.getAttribute("属性")。
区别：element.属性; 获取内置属性值（元素本身自带的属性值）
element.getAttribute("属性")；主要获取自定义属性（标准）我们程序员自定义的属性
2.设置属性值
element.属性=“值”； 设置内置属性值
element.setAttribute(“属性”,“值”)
比如：element.setAttribute（“data-index”，“2”）
3.移除属性值
element.removeAttribute(“属性”)
总结：
自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。
自定义属性通过getAttribute(“属性”)获取。
但是有些自定义属性很容易引起歧义，不容易判断是否是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
H5规定自定义属性data开头作为属性名并且赋值。比如：<div data-index="1"></div>
或者使用JS设置比如：element.setAttribute（“data-index”，“2”）
2.5节点操作
2.5.1为什么学节点操作？
1.利用DOM提供的方法获取元素
document.getElementById()
document.getElementByTagName()
document.querySelector()等
缺点：逻辑性不强、繁琐。
2.利用节点层级关系获取元素
利用父子兄节点获取元素
优点：逻辑性强，但是兼容性较差。
2.5.2节点概述
一般节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性。
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点。
2.5.3节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1.父级节点
node.parentNode
parentNode 属性可返回某节点的父节点，注意是最近的一个父节点，如果指定的节点没有父节点则返回null
2.子级节点
node.childNode
注意：node.childNode的返回值里面包含了所有的子节点，包括元素节点、文本节点。如果只需要获取里面的元素节点，则需要专门处理，所以我们一般不提倡使用。
例如：
var ul=document.querySelector("ul");
for(int i=0;i<ul.childNode.length;i++){
if(ul.childNode[i].NodeType==1){
//ul.childNode[i] 是元素节点
console.log(ul.childNodes[i]);
}
}
node.children (非标准)
parent.children 是一个只读属性，返回去所有的子元素节点，它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
虽然children是一个非标准，但是得到了各浏览器的支持，因此我们可以放心使用。
parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点，找不到则返回null。
3.兄弟节点
node.nextSibling
nextsibling返回当前元素的下一个兄弟节点，找不到则返回null。
node.previoussibling
previousSibling返回当前元素的上一个兄弟节点，找不到则返回null。
node.nextElementSibling
nextElementSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。
node.previousElementSibling
previousElementSibling`返回当前元素的上一个兄弟元素节点，找不到则返回null。
4.创建节点
document.createElement(“tagname”);
document.createElement()方法创建tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需要动态生成的，所以我们也称为动态创建元素节点。
5.添加节点
node.appendChild(child);
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
node.insertBefore(child,指定元素)；
6.删除节点
node.removeChild(child);
node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
7.复制节点（克隆节点）
node.cloneNode();
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点或拷贝节点。
注意：
如果括号里面为空或false，浅拷贝，只复制标签不复制里面的内容。
如果括号里面为true，深拷贝，复制标签复制里面的内容。
2.5.4总结·
1.三种动态创建元素的区别
document.write()
element.innerHTML
document.createElement()
write() 创建元素 如果页面文档流加载完毕，再调用这句话会调用导致页面重绘。
innerHTML 是将内容写入某个节点，不会导致页面重绘。
createElement() 创建多个元素，效率稍低一些，但是结构更清晰。
总之，不同的浏览器下，innerHTML效率要比createElement高。
2.DOM重点核心
文档对象模型（document object model）是w3c组织推荐的处理可扩展标记语言的标准编程接口。
w3c已经定义了一系列DOM接口，通过这些DOM接口可以改变网页的结构、内容和样式。
1>对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口。
对于HTML，DOM使得HTML形成一颗DOM树，包括文档（指整个页面）、元素（指标签）、节点（页面中所有的内容）。
对于DOM操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建： document.write()
element.innerHTML
document.createElement()
增： appendchild()
insertBefore(child,指定元素)
删： removeChild()
改：主要修改DOM的元素属性，DOM元素的内容、属性、表单的值等。
修改元素属性：src、href、title等。
修改普通元素内容：innerHTML、innerText等
修改表单元素：value、type、disabled等
修改元素样式：style、className等
查（获取）：主要获取查询DOM元素
DOM提供的API方法：getElementById、getElementByTagName.(不推荐)
HTML提供的新方法：querySelector、querySelectorAll.(提倡)
利用节点操作获取元素：父（parentNode）、子（children）、兄（prevousElementSibling\nextElementSibling）。（提倡）
3.属性操作（主要针对于自定义属性）
setAttribute:设置DOM的属性值
getAttribute：获取DOM的属性值
removeAttribute：移除属性
4.事件操作
给元素注册事件，采取事件源.事件类型=事件处理程序
| 鼠标事件 | 触发事件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfouse | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
2.6高级事件
2.6.1 注册事件（绑定事件）
2.6.2 删除事件（解绑事件）
2.6.3 DOM事件流
2.6.4 事件对象
2.6.5 阻止事件冒泡
2.6.6 事件委托（代理、委派）
2.6.7 常用的鼠标事件
2.6.8 常用的键盘事件
3.BOM
3.1 BOM概述
BOM（brower object model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM是由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
| DOM | BOM |
|---|---|
| 文档对象模型 | 浏览器对象模型 |
| DOM就是把（文档）当做一个对象来看待 | DOM就是把（浏览器）当做一个对象来看待 |
| DOM顶级对象是document | BOM顶级对象是window |
| DOM主要学习的是操作页面元素 | BOM学习的是浏览器窗口交互的一些对象 |
3.2 window对象的常见事件
3.2.1窗口加载事件
window.οnlοad=function() { };
或
window.addEventListener(“load”, function(){ });
3.2.2调整窗口大小事件
window.οnresize=function() { }
或
window.addEventListener(“resize”, function(){ });
3.3 定时器
3.3.1 window给我们提供了两个很好的定时器
setTimeOut()
setInterval()
3.3.2 window.setTimeOut(调用函数，【延迟的毫秒数】)
setTimeOut（）方法用于设置一个定时器，该定时器到期后执行调用函数。
注意：<1>window可以省略。<2>调用这个函数可以直接写函数，或者写函数名或者采取字符串“函数名（）”三种形式。<3>延迟的毫秒数默认是0，如果写，必须是毫秒。<4>因为定时器有很多，所以我们经常给定时器赋值一个标识符。
3.3.3停止 setTimeOut()定时器
window.clearTimeOut(timeoutID)
clearTimeOut()方法取消了先前通过调用setTimeOut（）建立的定时器。
注意：<1>window可以省略。<2>里面的参数就是定时器的标识符。
3.3.4 setInterval()定时器
window.setInterval(调用函数，【延迟的毫秒数】)
setInterval()方法重复调用一个函数，每隔这个时间，就会调用一次回调函数。
注意：<1>window可以省略。<2>调用这个函数可以直接写函数，或者写函数名或者采取字符串“函数名（）”三种形式。<3>间隔的毫秒数默认是0，如果写，必须是毫秒，表示每隔这个毫秒就自动调用这个函数。<4>因为定时器有很多，所以我们经常给定时器赋值一个标识符。
3.3.5停止 setInterval（）定时器
window.clearInterval(timeoutID)
clearInterval()方法取消了先前通过调用setTimeOut（）建立的定时器。
注意：<1>window可以省略。<2>里面的参数就是定时器的标识符。
两个定时器的区别：
setTimeOut:延时时间到了，就去调用这个回调函数，只调用一次，就结束了这个定时器。
setInterval:每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数。
3.4 location对象
3.5 navigator对象
3.6 history对象
4.PC端网页特效
4.1元素偏移量offset系列
4.1.1offset概述
offset翻译过来就是偏移量，我们使用offset系列相关属性可以得到动态的该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）。
offset系列属性：
| offset系列属性 | 作用 |
|---|---|
| element.offsetparent | 返回作为该元素作为带有定位的父级元素，如果父级没有元素，返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetleft | 返回元素相对带有定位父元素左边框的偏移 |
| element.width | 返回自身包括padding、border、内容区的宽度，返回数值不带单位 |
| element.height | 返回自身包括padding、border、内容区的高度，返回数值不带单位 |
4.1.4offset和style区别
| offset | style |
|---|---|
| offset可以得到任意样式的样式表 | style只能得到行内样式的样式表 |
| offset获得的数值是没有单位的 | style获得的是带有单位的字符串 |
| offsetwidth包含padding+border+width | style.width获得不包括padding和border值 |
| offsetwidth等属性是只读属性，只能获取，不能赋值 | style.width是可读写属性，可以获取，也可以赋值 |
| 所以，我们想要获取元素大小位置，用offset更合适 | 所以，我们想要给元素更改值，则需要用style改变 |
4.2元素可视区client系列
4.2.1client翻译过来就是客户端，我们使用client系列的相关属性来获取可视区的相关信息。通过client系列的相关属性值可以动态的得到该元素的边框大小、元素大小。
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding+内容区的宽度、不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding+内容区的宽度、不含边框，返回数值不带单位 |
4.2.2立即执行函数
4.3元素滚动scroll系列
4.4动画函数封装
4.4.1动画实现原理
核心原理：通过定时器setInterval()不断移动盒子位置。
实现步骤：(1)获得当前盒子位置
(2)让盒子在当前位置加上一个移动距离
(3)利用定时器不断重复这个操作
(4)加一个结束定时器的条件
(5)注意此元素需要添加定位，才能使用element.style.left
4.4.2动画函数的简单封装
注意：函数需要传递两个参数，动画对象和移动的距离。
<body>
<div></div>
<span>夏雨荷</span>
<script>
//简单对象封装obj目标对象，target目标位置
function animate (obj, target){
var timer=setInterval(function(){
if(obj.offsetyleft >= target){
//停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left=obj.offsetleft+1+"px";
},30);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
//调用函数
animate(div,500);
animate(span,500);
</script>
</body>
4.4.3动画函数给不同的元素记录不同的计时器
如果多个元素都使用这个动画效果，每一次都需要var声明计时器，我们可以给不同的元素使用不同的计时器（自己专门用自己的定时器）。
核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<style>
div {
position:absolute;
top:10px;
left:0px;
width:100px;
height:100px;
background-color:pink;
}
span {
display：block;
position:absolute;
top:150px;
left:0px;
width:150px;
height:150px;
background-color:green;
}
</style>
</head>
<body>
<button></button>
<div></div>
<span>夏雨荷</span>
<script>
//简单对象封装obj目标对象，target目标位置
//给不同的元素指定不同的定时器
function animate (obj, target){
//当我们不断地点击按钮，这个元素的速度就会越类越快，因为开启了太多的定时器
//解决方案：让我们元素只有一个定时器执行
//先清除以前的定时器，只保留当前的一个定时器执行。
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(obj.offsetyleft >= target){
//停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left=obj.offsetleft+1+"px";
},30);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
var btn=document.querySelector("button");
//调用函数
animate(div,500);
animate(span,500);
btn.addEventListener("click",function(){
animate(span,500);
})
</script>
</body>
4.4.4缓动效果原理
缓动效果的原理：让元素运动速度有所变化，最常见的是让速度慢慢停下来。
思路：（1）.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
（2）.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长。
100-0）/10=10
(100-10)/10=9
(100-19)/10=8.1
…
（3）停止的条件是：让当前盒子位置等于目标位置就停止定时器。
（4）步长值需要取整,如果是正值，则步长往大了取整。
如果是负值，步长往小了取整。
<body>
<button class="btn300">300步长</button>
<button class="btn800">800步长</button>
<div></div>
<span>夏雨荷</span>
<script>
//简单对象封装obj目标对象，target目标位置
//给不同的元素指定不同的定时器
function animate (obj, target){
//当我们不断地点击按钮，这个元素的速度就会越类越快，因为开启了太多的定时器
//解决方案：让我们元素只有一个定时器执行
//先清除以前的定时器，只保留当前的一个定时器执行。
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(target-obj.offsetleft)/10;
if(step>0){
var step=Math.ceil(step);
}else{
var step=Math.floor(step);
}
if(obj.offsetyleft = target){
//停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left=obj.offsetleft+step+"px";
},15);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
var btn300=document.querySelector("button");
var btn800=document.querySelector("button");
//调用函数
btn300.addEventListener("click",function(){
animate(div,300);
});
btn800.addEventListener("click",function(){
animate(span,800);
});
</script>
4.4.5动画函数添加回调函数
<script>
function animate (obj, target,callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(target-obj.offsetleft)/10;
if(step>0){
var step=Math.ceil(step);
}else{
var step=Math.floor(step);
}
if(obj.offsetyleft = target){
clearInterval(obj.timer);
//回调函数写到定时结束里面
if(callback){
callback();
}
}
obj.style.left=obj.offsetleft+step+"px";
},15);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
var btn300=document.querySelector("button");
var btn800=document.querySelector("button");
//调用函数
btn.addEventListener("click",function(){
animate(div,300);
});
btn.addEventListener("click",function(){
animate(span,800,function() {});
});
</script>
4.5常见网页特效案例
4.5.1轮播图
<body>
<div class="w">
<div class="main">
<div class="focus">
<!-- 左按钮 -->
<a href="javascript:;" class="arr-l"><</a>
<!-- 右按钮 -->
<a href="javascript:;" class="arr-r">></a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="image/lun1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/lun2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/lun3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</div>
<script>
window.addEventListener("load",function(){
//1.获取元素
var arrow_l=document.querySelector(".arrow-l");
var arrow_r=document.querySelector(".arrow-r");
var focus=document.querySelector(".focus");
//2.鼠标经过focus 就显示隐藏左右按键
focus.addEventListener("mouseenter",function(){
arrow_l.style.display="block";
arrow_r.style.display="block";
clearInterval(timer);
timer=null;//清除定时器变量
});
focus.addEventListener("mouseleave",function(){
arrow_l.style.display="none";
arrow_r.style.display="none";
timer=setInterval(function(){
//手动调用点击事件
arrow_r.click();
},2000);
});
//3.动态生成小圆圈 有几张图片，我就生成几张小圆圈
var ul=focus.querySelector("ul");
var ol=focus.querySelector("ol");
for(i=0;i<ul.children.length;i++){
//创建一个li
var li=document.querySelector("li");
//li.setAttribute("index",i);
//把li添加到ol里面
ol.appendChild(li);
//4.小圆圈的排它思想，我们可以直接在生成小圆圈的同时，直接绑定点击事件
li.addEventlistener("click",function(){
//干掉所有人 把所有的li 清除current 类名
for(i=0;i<ol.children.length;i++){
ol.children[0].className="";
}
this.className="current";
//5.点击小圆圈，移动图片，当然移动的是ul
var focuswidth=focus.oddsetWidth;
var index=this.getAttribute("index");
//当我们点击了某个li 就要把这个li的索引给num
num=index;
//当我们点击了某个li 就要把这个li的索引给circle
circle=index;
//调用封装好的动画函数
animate(ul,index*focuswidth);
})
}
//把ol里面的第一个小li设置类名为current
ol.children[0].className="current";
//6.克隆第一张图片的li放到ul最后面
var first=ul.chldren[0].cloneNode(true);
ul.appendChild(first);
//7.点击右侧按钮，图片滚动一张
var num=0;
var circle=0;
arr_r.addEventListener("click",function(){
if(num == ul.children.length-1){
ul.style.left=0;
num=0;
}
num++;
var focuswidth=focus.oddsetWidth;
animate(ul,-num*focuswidth);
//8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
//如果circle==4 说明走到最后我们克隆的这张图片了，我们就复原
if(circle==ol.chldren.length){
circle=0;
}
//先清除小圆圈的current类名
for(var i=0;i<ol.chldren.length;i++){
ol.children[i].className="";
}
//留下当前小圆圈的current类名
ol.childern[circle].className="current";
});
arr_l.addEventListener("click",function(){
if(num == ul.children.length-1){
num=ul.children.length-1;
ul.style.left=-num * focuswidth +"px";
}
num--;
var focuswidth=focus.oddsetWidth;
animate(ul,-num*focuswidth);
//9.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
//如果circle==4 说明走到最后我们克隆的这张图片了，我们就复原
if(circle<0){
circle=ol.children.length-1;
}
//先清除小圆圈的current类名
for(var i=0;i<ol.chldren.length;i++){
ol.children[i].className="";
}
//留下当前小圆圈的current类名
ol.childern[circle].className="current";
});
//10.自动播放轮播图
var timer=setInterval(function(){
//手动调用点击事件
arrow_r.click();
},2000);
});
</script>
</body>
5.移动端网页特效
5.1触屏事件
5.1.1触屏事件概述
移动端浏览器的兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用JS书写效果，但是移动端也有自己独特的地方。比如触屏事件（touch）.
touch代表一个触摸点。触摸点k可能是一根手指，也可能是一根触摸笔。触摸事件可响应用户手指对屏幕或触控板操作。
常见的触屏事件如下：
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指在一个DOM元素上移开时触发 |
5.1.2触摸事件对象
TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触电的移动、触电的增加和减少，等等。
touchstart 、touchmove、touchend三个事件都会各自有事件对象。
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生改变的列表，从无到有，从有到无变化 |
5.1.3移动端拖动元素
<1>touchstart、touchmove、touchend可以实现拖动元素
<2>但是拖动元素需要当前手指的坐标值（我们可以使用targetTouches[0]里面的pageX和pageY）
<3>移动端拖动原理：手指移动中，计算手指移动的距离。然后利用盒子原来的位置+手指移动的距离。
<4>手指移动的距离：手指滑动的位置-手指刚触摸的位置。
拖动元素三步曲：
1.触摸元素touchstart：获取手指初始坐标，同时获得盒子原来位置
2.移动手指touchmove:计算手指移动距离，并且移动盒子。
3.离开手指touchend
注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动 e.preventDefault();
5.2移动端常见特效
5.2.1移动端（手机）轮播图功能基本和pc端（浏览器）一致
<1>可以自动播放图片
<2>手指可以拖动播放轮播图
5.2.2classlist属性
classlist属性是THML5新增的一个属性，返回元素的类名。但是ie10以上的版本支持。该属性用于在元素中添加、移除、及切换css类。
以下方法：
添加类：element.classlist.add(“类名”)
移除类：element.classlist.remove(“类名”)
切换类：element.classlist.toggle(“类名”)
5.3移动端常见开发插件
5.3.1开发插件
中文官方地址swiper：http：//www.swiper.com.cn/
其他插件：superslide:http：//www.superslide2.com/
iscroll: https：//www.github.com/cubiq/iscroll
<1>引入插件相关文件
<2>按照规定语法使用
5.3.2插件的使用总结
（1）确认插件实现的功能
（2）去官网查看使用说明
（3）下载插件
（4）打开demo实例文件，查看需要引入的相关文件，并且引入。
（5）复制demo实例文件中的结构html，样式css以及js代码。
5.3.3移动端视频插件zy.media.js
H5给我们提供了video标签，但是浏览器支持情况不同，不同的视频格式文件，我们可以通过source解决。但是外观样式，还有暂停、播放、全屏等功能，我们只能自己写代码解决。
5.4移动端常用开发框架
5.4.1框架概述
框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者按照框架规定的某种规范进行开发。
插件，一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
前端常用的框架有：bootstrap、vue、Angular、React等，既能开发PC端，也能开发移动端。
前端常用的移动端插件有：swiper、superslide、iscroll等
5.4.2BootStrap
BootStrap是一个简洁、直观、强悍的前端开发框架，它让web开发更迅速、简单。
BootStrap JS插件使用步骤：<1>引入相关JS文件。<2>复制html结构。<3>修改对应样式。<4>修改相应JS参数。
6.本地储存
6.1本地储存的特性**：<1>数据储存在用户浏览器中。<2>设置、读取方便、甚至页面刷新都不丢失数据。<3>容量较大，sessionStorage约5M、localStorage约20M。<4>只能存储字符串，可以将对象JSON.Stringify()编码后存储。
6.2window.sessionStorage
<1>生命周期为关闭浏览器窗口
<2>在同一个窗口下数据可以共享
<3>以键值对的形式存储使用
存储数据：sessionStorage.setItem(key,value)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
删除所有数据：sessionStorage.clear()
6.3window.localStorage
<1>生命周期永久生效，除非手动删除，否则关闭页面也会存在。
<2>可以多窗口（页面）共享（同一浏览器可以共享）
<3>以键值对的形式存储使用
存储数据：localStorage.setItem(key,value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()
3077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
