原生原生JS实现的轮播图功能详解实现的轮播图功能详解
本文实例讲述了原生JS实现的轮播图功能。分享给大家供大家参考,具体如下:
一、效果预览:一、效果预览:
由于只能上传2M以下的图片,这里只截取了自动切换的效果:
二、编写语言二、编写语言
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有两个子函数leftToggle和rightToggle分别实现向左、向右切换一张
图,将他们分别绑定到.prev和.next按钮的clik事件;
2、切换功能的淡入动画效果
只有1的话切换是立即产生的,没有过渡效果;这里利用定时器和步长将切换功能细化到更小的滑动操作leftStep和
rightStep,leftToggle和rightToggle通过多次调用滑动操作来实现一次切换,这样就会产生动画效果;
3、跳转功能
对指示器的每个圆形按钮绑定跳转功能,跳转实际上是将.slide进行移动;
4、自动播放
只需要设置定时器,每隔一定时间执行切换即可;
四、我的代码四、我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.m-view,.m-view .slide img{
position: relative;/*作为绝对定位的父元素*/
width: 800px;