本文实例讲述了原生JS实现的轮播图功能。分享给大家供大家参考,具体如下:
一、效果预览:
二、编写语言
HTML、CSS、原生JS
三、编写思路
(一)HTML部分
1、.slide
意为滑槽,里面存放所有图片;
2、.prev
存放向左的箭头,.next存放向右的箭头;
3、pointer
意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示;
4、.m-view
,意为视窗,即每次看到图片的窗口,它存放以上所有的部件;
(二)CSS部分
1、.m-view
设为相对定位,他的后代元素可以以它作为绝对定位的参照;
2、.slide
、.prev
、.next
、pointer
全都用绝对定位放到合适位置;
3、.slide
的所有图片水平排列,且视窗.m-view
的宽度设为只有一张图片那么宽,这样默认情况.slide
还是会全部显示;当给.m-view
设置overflow:hidden
后子元素超出它的部分就会隐藏,就实现了只显示一张图片的效果;
(三)JS部分
1、切换功能:
设置一个切换函数toggle实现左切或者右切一张图,toggle有两个子函数.prev和.next
按钮的clik事件;
只有1的话切换是立即产生的,没有过渡效果;这里利用定时器和步长将切换功能细化到更小的滑动操作调用滑动操作来实现一次切换,这样就会产生动画效果;
对指示器的每个圆形按钮绑定跳转功能,跳转实际上是将.slide进行移动;
4、自动播放
只需要设置定时器,每隔一定时间执行切换即可;
四、我的代码