js特效-无缝轮播图,简单上手

时间:2024-04-05 10:59:23

首先,让大家看效果:

js特效-无缝轮播图,简单上手

然后给大家介绍一下无缝轮播图的原理

1.我们在一个ul中会使用很多的li,每一个li中嵌入一个图片,如果把轮播图比喻成慢视频的话,每一张图片就是一帧(注意:很多新手会认为一些图片是动态生成的,其实不然,每一张图片已经设置在html中,只不过显示的时候,使用overflow:hidden;将其隐藏了),下面画个图让大家方便大家理解

js特效-无缝轮播图,简单上手

2:现在开始定义动画函数animate让ul在div中滚动,通过ul中定位中style.left属性值配合setInterval函数,简直完美

js特效-无缝轮播图,简单上手

3.重头戏来了,我觉得你理解了这点,就算是掌握了。

大家思考一下:怎么用一种很巧妙的方法让最后一张图片和第一张图片无缝连接

原理解释:

1.界面初始化:ul中5个li,每一个宽度是500px; 当你设置ul的宽度的时候,直接把ul的width设为3000px;

2.当js加载的时候,将第一张图片复制,加载到li的最后,所以ul总共有6个li,width自然是3000px;

3.然后关键:当轮播到第五张图片的时候,第六张图片可以实现无缝的切换,这个时候是会轮播到第六个li上,也就是第一张图,这个时候要将ul的left设为0;

4.固然就回到了第一张图,其实在显示第六张图的时候,其实显示的第一张,由于直接设置left:0px;则不会出现视觉上的改变。所以在滑到第六个li的时候,我们又回到了第一张图片的位置。不懂直接上代码;

js特效-无缝轮播图,简单上手

4.上面就是实现无缝轮播切换,关于其他的一些左右点击切换和图片列表都不难,没什么好说的,我在代码里面都写了,大家有兴趣去下载看一下

源码地址:https://github.com/Magiccwl/JS_specialeffects