js相关
1.设计思想：各司其职
js控制逻辑，样式交给CSS
2.轮播图实践
见本地代码
思想：
图片结构是一个列表型结构，所以主体用 <ul>
使用 css 绝对定位将图片重叠在同一个位置
轮播图切换的状态使用修饰符（modifier）
轮播图的切换动画使用 css transition
复现思路：
1，html：
一个div,n个img，给一样的类名，其中一个选中的有不一样的类名
控制结构：两个箭头，n个原点
2，css,所有img绝对定位，未被选中的都隐藏，选中的显示,可以用visible属性，或者是z-index
控制结构应绝对定位，且z-index级别最高。
3，js：
1，获取所有img的节点，获取被选中的节点，在所有节点中查找选中节点的index,
2，封装跳转下一个的方法，跳转前一个，跳转到特定序号的页面,定时器
3，左右箭头触发跳转的方法，监听页面，当前选中的index对应的原点颜色变化，点击原点获取当前点的index,调用跳转特定页面函数。
css
1.transform:变形,改变
搭配用法：transform-origin CSS属性让你更改一个元素变形的原点。参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
属性：旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix。
旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)
缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素
matrix(scale.x ,, , scale.y , translate.x, translate.y)
改变起点位置 transform-origin: bottom left;
transform: rotate 旋转| scale 缩放| skew扭曲 | translate移动 |matrix矩阵变形;
综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开
2.translate:移动
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
一个参数：XY都移动相同的
两个参数：XY分别移动
参数为百分数：相对自身移动，宽度高度未知也可以，这个特性用来做居中非常稳
用法transform: translate(50px, 100px);
3.transition
允许CSS属性值在一定的时间区间内平滑的过渡。(过渡动画)
Transition作用是指定了某一个属性（如width、left、transform等）在两个值之间如何过渡。 如果某一个元素指定了Transiton，那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡，动画就这么产生了。
transition主要包含四个属性值：
（1）执行变换的属性：transition-property；
（2）变换延续的时间：transition-duration；
（3）在延续时间段，变换的速率变化：transition-timing-function //例:平缓进入、先快后慢；
（4）变换延迟时间：transition-delay。
需要事件的触发，例如单击、获取焦点、失去焦点等。
语法：transition:property duration timing-function delay;
例如：transition:width（all代表全部事件） 2s ease 0s;
4. animation实例
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
