易网时代-编程资源站
易网时代-编程资源站 
从图片上还是可以看出大概效果的，我就不多说了。想看真实代码效果的，欢迎到我的github上面download代码，别忘了给我的github项目点个星星噢^_^
三、实现过程
html结构
<div class="carrousel-main" data-setting="{"width":1000,"height":400, "carrouselWidth":750, "carrouselHeight":400, "scale":0.9, "verticalAlign":"middle"}"><div class="carrousel-btn carrousel-btn-pre"></div><ul class="carrousel-list"> <li class="carrousel-item"><a href="#"><img src="img/1.jpg"></a> </li> <li class="carrousel-item"><a href="#"><img src="img/2.jpg"></a> </li> <li class="carrousel-item"><a href="#"><img src="img/3.jpg"></a> </li> <li class="carrousel-item"><a href="#"><img src="img/4.jpg"></a> </li> <li class="carrousel-item"><a href="#"><img src="img/5.jpg"></a></ul><div class="carrousel-btn carrousel-btn-next"></div> </div> 这个结构和一般轮播的html代码结构是一样的，稍有不同就是，主轮播div上面有一个data-setting的属性，这个属性里面就是一些轮播效果的参数。参数的具体意义稍后再讲解。Carousel.init=function（carrousels）{ var _this=this;//将nodeList转换为数组var cals= toArray（carrousels）; <br>/*因为原生JS获取所有的类，得到的是一个nodeList，是一个类数组,如果想要使用数组的方法则需要转化为真正的数组。这里toArray为转化方法。*/cals.forEach（function（item,index,array）{new _this（item）;}）; }这样的话，我在window.onload的时候，调用Carrousel.init（document.querySelectorAll（".carrousel-main"））;这样就可以创建多个轮播啦！setValue:function（）{this.carrousel.style.width=this.Settings.width+"px";this.carrousel.style.height=this.Settings.height+"px"; /*左右按钮设置,这里要让左右按钮平均地瓜分轮播区域宽减去第一帧宽度之后的区域,z-index要比除第一帧外所有图片都高，而图片刚好左右分放置，因此z-index的值就是图片数量的一半。*/ var btnW=（this.Settings.width-this.Settings.carrouselWidth）/2; this.preBtn.style.width=btnW+"px"; this.preBtn.style.height=this.Settings.height+"px"; this.preBtn.style.zIndex=Math.ceil（this.carrouselItems.length/2）;this.nextBtn.style.width=btnW+"px"; this.nextBtn.style.height=this.Settings.height+"px"; this.nextBtn.style.zIndex=Math.ceil（this.carrouselItems.length/2）; //第一帧相关设置 this.carrouselFir.style.left=btnW+"px"; this.carrouselFir.style.top=this.setCarrouselAlign（this.Settings.carrouselHeight）+"px"; this.carrouselFir.style.width=this.Settings.carrouselWidth+"px"; this.carrouselFir.style.height=this.Settings.carrouselHeight+"px"; this.carrouselFir.style.zIndex=Math.floor（this.carrouselItems.length/2）;},这里，就是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后等于传入的值的时候清楚计时器即可。具体可以看这里。