原生JS实现轮播式图片轮播插件

我轮换写了三张图片，一张是用没有动画效果的简单原生JS实现的，一张是用有淡入淡出切换的JQuery实现的。现在，如果你想做一个很酷的，放在你的博客或个人网站上，你可以展示你的作品。参观了大型在线开放课程后。com，我发现有一个针对旋转木马的jquery插件课程，有点酷，所以我考虑用原生JS打包。当我做的时候，我发现并没有我想象的那么容易。不要啰嗦，说明实施过程。

第二，效果。

因为我的服务器还没准备好。我无法在线演示(ORZ.)，所以只能放一张效果图。

从图片上还是可以看到大致的效果，我就不多说了。如果你想看到真实的代码效果，欢迎在我的github上下载代码，别忘了为我的github项目点亮一颗星。

三是实施过程。

Html结构

div class=' carrousel-main ' data-setting=' { ' width ' :1000，' height':400，' carrouselWidth':750，' carrouselHeight':400，' scale':0.9，' VerticalaLing ' : ' middle ' } ' div class=' carrousel-BTN carrousel-BTN-pre '/div ul class=' carrousel-list ' Li class='参数的具体含义将在后面解释。

代码的css部分不会被发布。最重要的是要注意元素的绝对定位。从渲染图中可以看出，每张图片的位置和大小都不一样，所以这些都是由js控制的，所以需要绝对定位。下面重点介绍js的实现过程。

JS实现过程。

以下是JS的几个关键步骤。这些步骤完成后，应该就没有什么困难了。

默认参数。

因为它是一个包插件，所以必须配置一些参数的默认值。在这个插件中，主要有以下参数：宽度：1000，//幻灯片区域的宽度高度：400，//幻灯片区域的高度carrouselWidth:700，//幻灯片第一帧的宽度carrouselHeight:400，//幻灯片第一帧的高度是scale :0.9 .//记录显示比例关系，比如第二张图片的宽度和高度小于第一张图片时的宽度和高度//是否自动播放时间跨度：3000，///自动播放间隔垂直对齐3360 '中间'/图片对齐方式为上\中\。

封装对象。

因为一个网站可能在很多地方使用同一个carousel插件，所以打包非常关键。定义了这个对象之后，如果定义了对象的初始化方法，就可以创建多个对象，只需要传入同一个类的dom。因此，我的初始化方法如下：

carousel . init=function(carrousels){ var _ this=this；//将nodeList转换为数组var cal=to array(carrousels)；Br /*因为原生JS获得了所有的类，所以它获得了nodeList，这是一个类数组。如果要使用数组方法，需要将其转换为实数组。这是转换方法。*/cal . foreach(函数(项、索引、数组){ new _this(项)；});}在这种情况下，当我在window.onload中时，我调用了carrousel . init(document . queryselectorall('。carrousel-main’)；这样，你就可以创建多个转盘了！

初始化第一帧的位置参数。

因为第一帧之后的所有帧的相关参数是参照第一帧定义的，所以很好地定义第一帧是至关重要的。

setvalue : FuncTion(){ this . carrousel . style . width=this。Settings.width ' pxthis . carrousel . style . height=this。Settings.height ' px/*设置了左右按钮。在这里，让左右按钮平均划分转盘宽度减去第一帧宽度后的区域。z-index高于除第一帧以外的所有图片，图片正好是左右，所以z-index的值是图片个数的一半。*/var btnW=(这。settings . width-这个。settings . carroussewidth)/2；this . PrebTN . style . width=BTNW ' px '；this.preBtn.style.height=this。Settings.height ' pxthis . prebtn . style . zindex=math . ceil(this . CarrousseItems . length/2)；this . NextBtn . style . width=BtNw ' px '；this.nextBtn.style.height=this。Settings.height ' pxthis . nextbtn . style . zindex=math . ceil(this . CarrousseItems . length/2)；//第一帧的相关设置是this . carrouseirr . style . left=btnw ' px '；this . Carroussefir . style . top=this . setCarroussealign(this。settings . carrousheight)' px '；this . Carroussefir . style . width=this。Settings.carrouselWidth ' pxthis . Carroussefir . style . height=this。Settings.carrouselHeight ' pxthis . Carroussefir . style . zindex=math . floor(this . Carrousseitems . length/2)；}，在这里，当它是新对象时，获取dom节点中的数据设置参数，然后更新默认参数配置。这里有一点需要注意。从dom获得的参数不能通过赋值直接更新，因为当用户配置参数时，不是所有的参数都可以配置一次。如果直接进行分配，而用户没有配置所有参数，那么这些参数将会丢失。这里我写了一个类似于$的对象扩展方法。在JQuery中扩展方法来更新参数。不列举细节，有兴趣可以下载。

其他图片位置设置。

其实这里的图片除了第一张以外，都是等分左右的，左边的图片和右边的图片位置不一样，需要单独配置：

//设置右边图片var rightIndex=level的位置关系；rightSlice.forEach(函数(项、索引、数组){ right index-；var i=指数；rw=rw * carrouselSelf。Settings.scale//右边的图片是RH=RH * carrousel self。设置。根据比例逐渐减小的比例；item . style . zindex=right index；//越往右，z-index的值越小，所以可以使用一般递减的图片项数. item.style.width=rw ' pxitem . style . height=RH ' px '；item . style . opacity=1/(I)；//透明度随着您进入right.br//the间隙而降低这里的计算方法如下：从转盘区域减去第一帧的宽度，除以2，然后除以左侧或右侧的图片数量。item . style . left=(const offset(index)* gap-rw)' px '；//left的值实际上是第一帧的left，第一帧的宽度，项目的间距减去项目的宽度。style.top=carrouselself。setcarrousalign(RH)‘px’；});左边的设置方法也差不多，比较简单，就不细说了。

旋转时调整所有图片的位置和大小。

这是关键的一步。点击右键，下一个是左旋转，点击左键，上一个是右旋转。此时，我们只需要将所有图片视为一个环，点击一次，改变一次位置，即可完成旋转。具体来说，当向左旋转时，使第二张纸的参数等于第一张纸，第三张纸等于第二张纸.最后一张等于第一张。向右旋转时，使第一页的参数等于第二页的参数，第二页等于第三页的参数.最后一张纸的参数等于第一张纸的参数。

让我们在这里谈谈左旋转。

if(dir==' left '){ to array(this . carrousel items)。forEach(函数(项、索引、数组){ var preIf(index==0){//判断是否是第一个pre=_ this.carrouselLat//让第一张纸的宽度等于最后一张纸的宽度；//获取相应的参数var height=pre.offsetHeightvar zIndex=pre . style . zIndex；var opa=pre . style . opacity；var top=pre . style . top；var left=pre . style . left；} else { var width=tempWidthvar height=tempHeightvar zIndex=tempZIndexvar opa=tempOpacityvar top=tempTopvar left=tempLeft}//这里需要注意的是，因为第二张图指的是第一张图，当这个改变时，第一张图先改变，所以第一张图的相关参数必须暂时保存。tempWidth=item.offsetWidthtempHeight=item.offsetHeighttempZIndex=item . style . zindex；tempOpacity=item . style . opacity；tempTop=item . style . top；template ft=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 animate function _ this . rotateflag=true；});});}如果不过度使用一些动画，这里的旋转会很僵硬。但是原生JS没有动画功能。这里我自己写了一个模拟动画函数。原则是获取dom的原始样式值，并将其与新引入的值进行比较。以某种方式定义速度。我这里的速度是除以18。但是，定义一个计时器，并参考jquery源代码中的时间间隔，每13毫秒执行一次。然后每次加速度后，当原始样式值等于传入值时，清除计时器。你可以具体看这里。

好了，要点差不多了。这些过程应该很容易理解！

第四，总结思考。

总结：

个人觉得这还是一个相对可以理解的插件。如果能和JQuery结合起来就相当简单了。但是，如果用母语写，还是有一些不太流畅的感受。应该是自定义动画比不上JQuery打包动画。

还有，因为这个插件的图片需要左右等分，对于偶数个图片，这里使用的方法是先克隆第一个，再加到最后一个，形成奇数。

思考：

如果有bug的话，那就是我定义了一个rotateFlag的标志来判断它目前是否可以旋转，也就是防止快速点击掉队。我按的时候把rotateFlag设置为false，动画结束后再把rotateFlag设置为true，但是好像效果不明显。希望有关大神能给我一些建议，一起进步。

以上就是本文的全部内容。更多信息请参考：javascript图片轮播效果总结。感谢阅读。