主要的js旋转类型图片旋转木马插件
我写了三个图片轮播，一个简单的原生js实现，不是动画，是一个结合jQuery，淡出开关。现在想在博客或个人网站做一点点的酷，你可以展示你自己的工作。看着慕斯网，我们发现了一个jQuery插件过程旋转木马，这是一个有点冷，所以我想把它用原生js。找出来，不像我想象的那样容易。不是长篇大论，解释执行过程。两。影响
因为我的服务器还没有得到在线演示（orz…）只能放在一个效果图。
从这幅图中，我们可以看到效果，我不多说了。想看代码的实际效果，欢迎到我的github下载代码，别忘了给我的小星星哦^ _ ^ GitHub项目
三。实现过程
HTML结构
＜div class=旋转木马的主要数据设定={宽度：1000，高度：400，
carrouselwidth ：750，
carrouselheight ：400，
刻度：0.9，
VerticalAlign ：中}>
一般的结构和旋转木马的HTML代码结构是相同的，稍有不同，主旋转div具有数据设置属性，这个属性是一些参数的旋转木马效果。参数的具体含义将在后面解释。
CSS部分代码不贴，最重要的是要注意元素的绝对定位。从效果图中我们可以看到每个图片的位置和大小是不同的，所以这些都是JS控制的，所以我们需要绝对定位。
js实现的过程
下面是js的一些关键步骤。做完这些步骤后，就不会有困难了。
默认参数
由于它是一个包插件，所以必须配置一些参数缺省值：
宽度：1000 幻灯片面积宽度
高度：400 /滑动面积高度
carrouselwidth：700，第一帧/幻灯片的宽度
carrouselheight：400，第一帧/幻灯片的高度
刻度：0.9 记录显示比例关系，如第二张图片比第一张图片时高宽多。
自动播放：真正的 /自动播放
时间：3000 / /自动播放时间间隔
VerticalAlign：' / /图像对齐，有向上中底三种方式，默认是中间
包对象
因为一个网站可能有很多地方会使用旋转木马插件，所以包是关键，在定义对象之后，如果我们定义了对象的初始化方法，我们可以创建多个对象，只需要导入所有相同的类DOM，所以，我的初始化方法如下所示：
旋转木马。init =功能（Carrousel）{
无功_this =这；
/ /转换列表的数组
var = toArray（Carrousel）CALS； / *因为原生js获取所有的类，得到一个列表，是一个数组，如果你想使用数组的方法需要变成一个真正的数组。这里的toArray是变换方法。* /
cals.foreach（功能（项目、指标、阵列）{
新的_this（项目）；
}）；
}
所以，当我在在window.onload，叫carrousel.init（document.queryselectorall（'。Carrousel主'））；所以你可以创建多个旋转木马！
（3）初始化第一帧的位置参数。
由于第一帧之后的帧的所有相关参数都是参照第一帧来定义的，因此定义第一帧是至关重要的。
设定值：函数（）{
这个旋转木马。风格。宽度=本。设置宽度+ 'px；
这个旋转木马。风格。高度=这个高度+ 'px设置；
关于 / *按钮设置，来绕过按钮后均匀地将传送带宽的面积减去第一帧，Z指数高于一切，除了第一个画面，画面只是点放置，所以z-index值一半的图片数量。* /
无功btnw =（这个设置。宽度的设置。carrouselwidth） / 2；
这个prebtn。风格。宽度= btnw + 'px；
这个prebtn。风格。高度=这个高度+ 'px设置；
这个prebtn。风格。zIndex = math.ceil（这个。carrouselitems。长度/ 2）；
这个nextbtn。风格。宽度= btnw + 'px；
这个nextbtn。风格。高度=这个高度+ 'px设置；
这个nextbtn。风格。zIndex = math.ceil（这个。carrouselitems。长度/ 2）；
第一帧设置
这个carrouselfir。风格。左= btnw + 'px；
这个carrouselfir。风格。最高this.setcarrouselalign（这个设置。carrouselheight）+ 'px；
这个carrouselfir。风格。宽度=这个设置。carrouselwidth + 'px；
这个carrouselfir。风格。高度=这个设置。carrouselheight + 'px；
这个carrouselfir。风格。zIndex = math.floor（这个。carrouselitems。长度/ 2）；
}，
这里，当新对象是DOM节点时，它获取数据设置参数，然后更新默认参数配置。让DOM的参数不能直接更新默认参数分配值，因为用户不必配置所有参数一次在配置参数的时间。如果用户直接分配和用户没有设置所有的参数，该参数将丢失。在这里，我写了一个类似于$对象扩展方法，扩展方法在jQuery更新参数。不要列举具体的感兴趣的可以下载。
其他图片位置设置
这里的图片实际上是第一张图片，除了外面，平均分为左右两边，而图像在左右两个位置是不同的，所以需要配置：
设置右/ /位置
无功rightindex =水平；
rightslice.foreach（功能（项目、指标、阵列）{
rightindex --；
var =索引；
RW = RW * carrouselself.settings.scale； / /右边的照片是在按照规模比下降
相对湿度RH * carrouselself.settings.scale；
项目。风格。zIndex = rightindex； / /右边是z-index值较小，可以使用图片一般数量逐渐下降
项目。风格。宽度= RW + 'px；
项目。风格。高度= RH + 'px；
项目.样式.不透明度= 1 （+ + i）；右边的透明度是.这里计算的是第一帧宽度减去旋转区域，除了2张图片，然后是左边或右边的数字
项目。风格。左=（constoffset +（+指数）×差距RW）+ 'px '； / /左的价值实际上是对第一项的宽度减去第一帧的宽度+项的宽度。
项目。风格。最高carrouselself.setcarrouselalign（RH）+ 'px；
}）；
相似和设置方法比较简单，不细致。
旋转时所有图片的位置大小调整
这是关键的一步。点击右向左下一步按钮，然后点击左键向右拐。在这一点上，我们只需要看到所有的图片作为一个环，点击一次，并改变位置来完成旋转。当左旋转是特异的，第二个参数等于第一和第三等于二，而最后一个是等于第一。权当是旋转的，第一个参数等于第二，第二参数等于第三，而最后一个是等于第一个。
让我们来谈谈左旋。
如果（DIR = =右）{
ToArray (this.carrouselItems).ForEach (function (item, index, array) {
VaR的预；
如果（index = 0）确定第一个{ /
预_this.carrousellat； / /第一个让预等于最后一个
VaR的宽度= pre.offsetwidth； / /得到相应的参数
VaR高度= pre.offsetheight；
VaR在= pre.style.zindex；
VaR OPA = pre.style.opacity；
var = pre.style.top；
左= pre.style.left VaR；
其他{ }
VaR的宽度= tempwidth；
VaR高度= tempheight；
VaR在= tempzindex；
VaR OPA = tempopacity；
var = temptop；
左= templeft VaR；
}
在这里，因为第二个图片是对第一个图片的引用，当这个改变时，第一个是第一个改变，所以第一个临时保存的相关参数必须是。
tempwidth = item.offsetwidth；
tempheight = item.offsetheight；
tempzindex = item.style.zindex；
tempopacity = item.style.opacity；
temptop = item.style.top；
templeft = item.style.left；
项目。风格。宽度=宽度+ 'px；
项目。风格。高度=高度+ 'px；
项目。在=在风格；
项目。风格。不透明度：OPA；
项目。样式。顶部=顶部；
。项目。样式。左=左；
动画（项目，右，左，功能（JS）本土动画功能{ / /自定义
_this rotateflag =真；
}）；
}）；
}
这里的旋转，如果你不使用一些动画，会非常激烈。但原生js没有动画功能，在这里我写一个模仿动画功能自己。原理是把原始DOM风格的价值，并比较新传入的值。一些方法定义一个速度。我的速度在这里是定义一个定时器的区别，除了18，和每13毫秒中引用jQuery源代码的时间间隔，然后清除定时器可以在原有风格的值被添加到每一次它被添加到输入值的速度在这里你可以看到它的价值。
嗯，关键地点都一样。这个过程很容易理解。
四。总结与思考
总结：
就个人而言，这是对插件的更好的理解，如果使用jQuery可以做到这一点非常简单，但是在最初的编写中，仍然有一些不太流畅的东西，应该是一个定制的动画，它不比jQuery包更好。
此外，由于图片的缘故，这个插件需要均匀地分为左右两个部分。因此，对于偶数幅图片，这里使用的方法是克隆第一个图片，然后将其添加到结尾以形成奇数。
反思uff1a
如果有一个错误，那就是我定义的rotateflag迹象判断当前可以旋转，和它的时间来防止快速点击。我按下的时候，我rotateflag假，然后我把rotateflag真正在动画完成后，但它似乎没有非常有效。我希望你能启迪伟大的上帝，你可以一起进步。
以上内容都是内容，详情请参考：javaｓｃｒｉｐｔ图片转页效果摘要，谢谢大家阅读。