本人自己写过三个图片轮播，一个是简单的原生JS实现的，没有什么动画效果的，一个是结合JQuery实现的，淡入淡出切换的。现在想做一个酷一点的放在博客或者个人网站，到时候可以展示自己的作品。逛了一下慕课网，发现有个旋转木马的jquery插件课程，有点酷酷的，于是就想着用原生JS封装出来。做起来才发现，没有自己想象中的那么容易。。。不啰嗦了，讲解一下实现过程吧。
二、效果
由于自己的服务器还没弄好。在线演示不了（ORZ...)，只能放一张效果图了。
从图片上还是可以看出大概效果的，我就不多说了。想看真实代码效果的，欢迎到我的github上面download代码，别忘了给我的github项目点个星星噢^_^
三、实现过程
html结构
<div data-setting='{"width":1000,"height":400, "carrouselWidth":750, "carrouselHeight":400, "scale":0.9, "verticalAlign":"middle"}'> <div></div> <ul> <li> <a href="#"><img src="https://www.jb51.net/img/1.jpg"></a> </li> <li> <a href="#"><img src="https://www.jb51.net/img/2.jpg"></a> </li> <li> <a href="#"><img src="https://www.jb51.net/img/3.jpg"></a> </li> <li> <a href="#"><img src="https://www.jb51.net/img/4.jpg"></a> </li> <li> <a href="#"><img src="https://www.jb51.net/img/5.jpg"></a> </ul> <div></div> </div>
这个结构和一般轮播的html代码结构是一样的，稍有不同就是，主轮播div上面有一个data-setting的属性，这个属性里面就是一些轮播效果的参数。参数的具体意义稍后再讲解。
css部分的代码就不贴了，最重要就是要注意元素的绝对定位，由效果图可以看出来，每张图片的位置、大小都不一样，所以这些都是通过js控制的，因此需要绝对定位。下面重点讲一下js实现过程。
JS实现过程
下面讲几个JS的关键步骤，做好了这几个步骤之后，应该就没有什么难点了。
①默认参数
既然是封装插件，那么肯定会有一些参数的默认值需要配置的啦。这个插件中，主要有如下参数：
width:1000, //幻灯片区域的宽度
height:400, //幻灯片区域的高度
carrouselWidth:700, //幻灯片第一帧的宽度
carrouselHeight:400, //幻灯片第一帧的高度
scale:0.9,//记录显示比例关系，例如第二张图比第一张图显示的时候宽高小多少
autoPlay:true,//是否自动播放
timeSpan:3000,//自动播放时间间隔
verticalAlign:'middle' //图片对齐方式，有top\middle\bottom三种方式，默认为middle
②封装对象
因为一个网站可能有多个地方都会用到同一个轮播插件，所以封装很关键。定义了这个对象之后，如果给对象定义一个初始化方法是可以创建多个对象的，只需要把所有类相同的dom传进去就可以了。所以，我的初始化方法如下：
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); },