这里，就是new对象的时候，就到dom结点中获取data-setting参数，然后更新默认参数配置。这里有个地方需要注意的，获取dom的参数不能直接以赋值的方式更新默认参数，因为用户配置参数的时候，不一定会所有参数都配置一次。如果直接赋值而用户刚好不是所有参数都配置的话就会造成参数丢失。这里我是自己写了一个类似JQuery中的$.extend方法的对象扩展方法来更新参数的。具体就不列举了，感兴趣的可以去下载。
④其他图片位置设置
这里的图片实际上就是把除第一张之外的图片，平均地分到左右两则，而左边的图片位置和右边的是不同的，因此需要分别配置：
//设置右边图片的位置关系 var rightIndex=level; rightSlice.forEach(function(item,index,array){ rightIndex--; var i=index; rw=rw*carrouselSelf.Settings.scale;//右边的图片是按照scale比例逐渐变小的 rh=rh*carrouselSelf.Settings.scale; item.style.zIndex=rightIndex;//越往右边z-index的值越小，可以用图片数量的一般逐渐递减 item.style.width=rw+'px'; item.style.height=rh+'px'; item.style.opacity=1/(++i);//越往右边透明度越小<br> //这里的gap计算方法为：轮播区域减去第一帧宽度，除2，再除左边或者右边的图片张数 item.style.left=(constOffset+(++index)*gap-rw)+'px';//left的值实际上就是第一帧的left+第一帧的宽度+item的间距减去item的宽度 item.style.top=carrouselSelf.setCarrouselAlign(rh)+'px'; });
左边的设置方法类似且更为简单，就不细说了。
⑤旋转时所有图片的位置大小调整
这一步很关键，点击右边按钮下一张的即为左旋转，而点击左边按钮上一张即为右旋转。此时，我们只需要把所有的图片看成一个环形那样，点击一次，换一次位置即完成旋转。具体为左旋转的时候，令第二张的参数等于第一张，第三张等于第二张...而最后一张等于第一张即可。右旋转的时候，令第一张的参数等于第二张，第二张的参数等于第三张...而最后一张的参数等于第一张即可。
这里就说说左旋转吧
if(dir=='left'){ toArray(this.carrouselItems).forEach(function(item,index,array){ var pre; if(index==0){//判断是否为第一张 pre=_this.carrouselLat;//让第一张的pre等于最后一张 var width=pre.offsetWidth; //获取相应参数 var height=pre.offsetHeight; var zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //这里需要注意，因为第二张图片是参照第一张的，而这样改变的时候，第一张是首先被改变的，因此必须先把第一张的相关参数临时保存起来。 tempWidth = item.offsetWidth; tempHeight = item.offsetHeight; tempZIndex = item.style.zIndex; tempOpacity = item.style.opacity; tempTop = item.style.top; tempLeft = item.style.left; item.style.width=width+'px'; item.style.height=height+'px'; item.style.zIndex=zIndex; item.style.opacity=opa; item.style.top=top; // item.style.left=left; animate(item,'left',left,function(){//自定义的原生js动画函数 _this.rotateFlag=true; }); }); }
这里的旋转，如果不使用一些动画过度，会显得很生硬。但是原生JS并没有动画函数，这里我是自己写了一个模仿的动画函数。其原理就是获取dom原来的样式值，与新传入的值比较。用一些方法定义一个速度。我这里的速度就是用其差值除18.然定义一个计时器，参考了一下jquery源码里面的时间间隔为每13毫秒执行一次。然后才原来的样式值每次加上speed后等于传入的值的时候清楚计时器即可。具体可以看这里。
好啦，关键的地方都差不多啦，如果明白这些过程应该就很容易了！
四、总结思考
总结：
个人感觉这还是一个比较好理解的插件。如果能结合JQuery来做就相当简单了。但是用原生来写的话，还是有一些不那么流畅的感觉。应该是自定义动画比不上JQuery封装好的动画吧。
还有，这个插件因为图片需要平均分到左右两边，于是对于偶数数量的图片来说，这里用的方法是克隆第一张，然后加到最后，形成一个奇数。
思考：
如果说有bug的话，那就是我定义了一个rotateFlag的标志去判断当前能否旋转，就是预防快速点击的时候跟不上。我在按下的时候把rotateFlag设置为false，然后在动画结束后再把rotateFlag设置为true，但是好像作用并不明显，希望有关大神可以指教一下，大家共同进步。