image.png

一、结构

从结构开始出发，大体上可以看出是三个结构，第一个结构是轮播图区域，第二个结构是指示器，第三个结构是身后的背景。

二、样式

1.轮播图区域的大小是1200300，居中在整个屏幕的中心，每个li的大小是750300，而li中的img完全是父级的大小。
2.最重要的设计思想是三个层级的设计思想：中心的最大的可以看作为first-layer，第一个层级需要放大，并且居中在ul区域的中心，这里不借助于定位，借助于css3中的transformX，移动的距离是整个轮播图区域的宽度减去自身的宽度除以2，然后进行放大。
第二个层级：有左右两个，左面的second-layer-left在缩放的时候需要注意的细节点就是，整体缩放的情况下，是依据于中心点，所以说不会和ul的左边框完美的契合，所以说我们需要改变transform-origin，使得left center，中心点改变到li盒子的左边的中心点，这个时候缩放之后的盒子就是在我们想要的位置。
右面的second-layer-right的样式设置：需要注意的点是因为我们想要的结果是，缩放之后的盒子紧贴着ul的右边框，所以说我们需要首先将li缩放，然后计算这个盒子到右面自身需要移动的距离，也就是说 （1200 - 750*0.8），得到需要向右移动的距离。

三、js实现

实现思路：通过js来改变类名，同时结合transition和setinterval来实现轮播的效果。
第一个功能函数：active 接受一个参数，就是索引值
借助于接受的索引值得知当前需要进行展示的第一层的li是谁，以及通过index++和index—得知第二层的左右两个li的索引，通过为他们添加类名来进行轮播图的切换。
在改变类名的同时，借助于索引值改变与他们相关的指示器的类名以及后面的背景图片。
第二个功能：为每一个指示器添加点击事件，在每次点击的时候触发active函数。
细节点：1.在鼠标移入整个轮播图的时候需要清除定时器，避免在用户想要进行更换展示的时候依旧进行自动轮播。
2.在轮播图内部进行改变索引之后，需要将index 传出到外部的currentIndex。