纯js代码-实战轮播图

这今天小编带大家写一个js的轮播图效果，这个轮播图包括了点击上一张，下一张按钮和导航小圆点的点击切换。
轮播图的切换有两种方式，一种是切换图片，还有一种就是存放图片的容器，改变容器的位置，让其往左或往右整体移动。
下面给大家看一下两种方式区别：

上面这种就是直接切换图片方式来实现轮播图，这种方式相较于第二种改变位置的方式来说少了过渡动画的效果。所以小编今天在这里着重讲解一下第二种方式。
首先我们要先明白第二种改变位置是怎样改变的。
先给大家上html代码，看一下图片是怎样放的

<div class="wrapper">
        <ul class="sliderPage">
            <li><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.jpg" alt=""></li>
            <li><img src="./image/3.jpg" alt=""></li>
            <li><img src="./image/4.jpg" alt=""></li>
            <li><img src="./image/1.jpg"