html原生轮播图的实现,使用原生js以两种方式制作一个精美的轮播图(下)

展示界面 & github源码

(这里可以实现PC端模拟移动端左右滑动图片切换的效果)

github源码(包含两种方式实现轮播图的源码)

前言

如何用原生js实现一个简单的轮播图呢？前面我已经用一种方法实现了，可能有些小伙伴觉得那种方法写的轮播图有点low，不够炫酷。那么，那就请看看下面这种方法实现的轮播图吧！

现在我就分享第二种使用原生js实现轮播图的方法，这种方法制作轮播图的原理主要是控制所有图片的display从而控制图片显现的，为none的全部隐藏，为block显现出来，再通过定时器(setInterval)函数来控制图片达到轮播的效果。

这种方法是我在查阅资料的时候没有看到的轮播图实现思路，希望能给以后想写轮播图的小伙伴一点帮助。

需求分析

循环播放多张图片

鼠标点击轮播图下面的指示点可以跳转到对应的图片，跳转结束后，再进行循环播放。

可以手动左右切换图片，并且指示点也会进行相应的变化。

实现原理

原理主要是让所有的图片都在一个大盒子box-imgs里面。控制每一张照片float为left，就可以让所有图片重叠在一起并且都在这个大盒子box-imgs里；然后再控制所有图片的display值从而控制图片显现的，要显现出来的图片display值为block，其他所有图片display值都为none；

而图片轮播的效果就可以通我们熟悉的定时器(setInterval)函数，每过一段时间改变图片的display值从而控制图片达到轮播的效果，我们还可以通过给显现出来的图片添加类名来增加酷炫的动画效果。

实现过程&思路

HTML部分

• 
• 
• 
• 

复制代码大盒子box-cirs-imgs包含着装载所有图片的盒子box-imgs和指示点类名为box-cirs的ul结构。盒子box-imgs里包含着装载图片的ul、li结构。这里结构很简单，我就不细讲了。

注意：html部分我没有写指示点的结构，后面我会通过js来添加指示点。

CSS部分

.box-cirs-imgs {

position: relative;

}

.box-imgs