如何实现轮播图？

通过以下的5个过程，实现轮播图的轮播效果

1.动态生成结构

创建元素和插入元素的方法分别是什么？
创建元素：document.creatElement( tagName ) var li = document.creatElement(“li”)；
插入元素：appendChild( element ) ol.appendChild(“li”);
通过什么方法复制第一张图片元素？
通过cloneNode()方法来复制元素：eg . var firstImg = ulLis[0].cloneNode(true)； 其中cloneNode方法中，如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点

2.鼠标经过按钮

鼠标经过时如何改变按钮样式？
a. 清除所有按钮的样式 for (var j = 0; j < olLis.length; j++) { olLis[j].className = “”; }
b. 给当前鼠标所在按钮添加特殊样式this.className = “current”;
鼠标经过按钮时如何计算图片盒子移动的距离?
通过按钮索引值（this.index）和图片的宽度（imgWidth）来计算图片盒子要移动的距离（target） target = - this.index * imgWidth

3.鼠标点击箭头

通过什么属性改变左右箭头的隐藏和显示？
通过控制左右箭头盒子的display属性来控制左右箭头盒子的显示（block）和隐藏（none）
通过什么机制来统一左/右箭头点击时图片切换为当前图片的上/下一张？
利用全局变量来统一左右箭头切换图片，在左右箭头点击时，通过pic来计算图片盒子移动的目标位置 var target = -pic * imgWidth;
当点击左箭头时：pic– –这样target比当前位置数值大imgWidth 图片盒子向右移动一张图片的距离 显示出上一张图片
当点击右箭头时：pic++ 这样target比当前位置数值小imgWidth 图片盒子向左移动一张图片的距离 显示出下一张图片

4.按钮随之变化

square的取值范围以及其与pic对应情况

5.添加自动滚动

图片自动播放下一张和点击右箭头的操作相同
图片轮播主要技术点为：
一、<ul> <li> 来作导航栏；
二、通过设置其属性为overflow:none，使照片集部分隐藏；

三、CSS3的transition 结合 transform 来做动画变换；
四、JQUERY通过选择器，控制动画元素属性。

动画描述
一、鼠标放在图片上，会出现左右滑动箭头；
二、点击箭头会使图片集左右移动，中间图片会旋转360度，并放大1.2倍；
三、图片到边界时不能再滑动