原生JS实现旋转木马式图片轮播插件_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了原生JS实现旋转木马式图片轮播插件_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6922字，纯文字阅读大概需要10分钟。
内容图文
本人自己写过三个图片轮播，一个是简单的原生JS实现的，没有什么动画效果的，一个是结合JQuery实现的，淡入淡出切换的。现在想做一个酷一点的放在博客或者个人网站，到时候可以展示自己的作品。逛了一下慕课网，发现有个旋转木马的jquery插件课程，有点酷酷的，于是就想着用原生JS封装出来。做起来才发现，没有自己想象中的那么容易。。。不啰嗦了，讲解一下实现过程吧。
二、效果
由于自己的服务器还没弄好。在线演示不了（ORZ...)，只能放一张效果图了。
从图片上还是可以看出大概效果的，我就不多说了。想看真实代码效果的，欢迎到我的github上面download代码，别忘了给我的github项目点个星星噢^_^
三、实现过程
html结构
这个结构和一般轮播的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传进去就可以了。所以，我的初始化方法如下：
这样的话，我在window.onload的时候，调用Carrousel.init(document.querySelectorAll('.carrousel-main'));这样就可以创建多个轮播啦！
③初始化好第一帧的位置参数
因为，第一帧之后的所有帧的相关参数都是参照第一帧来定义的，因此，定义好第一帧很关键。
这里，就是new对象的时候，就到dom结点中获取data-setting参数，然后更新默认参数配置。这里有个地方需要注意的，获取dom的参数不能直接以赋值的方式更新默认参数，因为用户配置参数的时候，不一定会所有参数都配置一次。如果直接赋值而用户刚好不是所有参数都配置的话就会造成参数丢失。这里我是自己写了一个类似JQuery中的$.extend方法的对象扩展方法来更新参数的。具体就不列举了，感兴趣的可以去下载。
④其他图片位置设置
这里的图片实际上就是把除第一张之外的图片，平均地分到左右两则，而左边的图片位置和右边的是不同的，因此需要分别配置：
左边的设置方法类似且更为简单，就不细说了。
⑤旋转时所有图片的位置大小调整
这一步很关键，点击右边按钮下一张的即为左旋转，而点击左边按钮上一张即为右旋转。此时，我们只需要把所有的图片看成一个环形那样，点击一次，换一次位置即完成旋转。具体为左旋转的时候，令第二张的参数等于第一张，第三张等于第二张...而最后一张等于第一张即可。右旋转的时候，令第一张的参数等于第二张，第二张的参数等于第三张...而最后一张的参数等于第一张即可。
这里就说说左旋转吧
这里的旋转，如果不使用一些动画过度，会显得很生硬。但是原生JS并没有动画函数，这里我是自己写了一个模仿的动画函数。其原理就是获取dom原来的样式值，与新传入的值比较。用一些方法定义一个速度。我这里的速度就是用其差值除18.然定义一个计时器，参考了一下jquery源码里面的时间间隔为每13毫秒执行一次。然后才原来的样式值每次加上speed后等于传入的值的时候清楚计时器即可。具体可以看这里。
好啦，关键的地方都差不多啦，如果明白这些过程应该就很容易了！
四、总结思考
总结：
个人感觉这还是一个比较好理解的插件。如果能结合JQuery来做就相当简单了。但是用原生来写的话，还是有一些不那么流畅的感觉。应该是自定义动画比不上JQuery封装好的动画吧。
还有，这个插件因为图片需要平均分到左右两边，于是对于偶数数量的图片来说，这里用的方法是克隆第一张，然后加到最后，形成一个奇数。
思考：
如果说有bug的话，那就是我定义了一个rotateFlag的标志去判断当前能否旋转，就是预防快速点击的时候跟不上。我在按下的时候把rotateFlag设置为false，然后在动画结束后再把rotateFlag设置为true，但是好像作用并不明显，希望有关大神可以指教一下，大家共同进步。
以上就是本文的全部内容，更多内容请参考：javascript图片轮播效果汇总 ，谢谢大家的阅读。
内容总结
以上是互联网集市为您收集整理的原生JS实现旋转木马式图片轮播插件_javascript技巧全部内容，希望文章能够帮你解决原生JS实现旋转木马式图片轮播插件_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。