原生js两种方法实现轮播图

方法一：

通过定位，将所有li定位在同一位置，然后将opacity设置为0，通过排他思想，点击谁，谁的opacity变为1。

方法二：

通过flex布局，将小li一行排列，大盒子overflow:hidden，点击哪个li，就让ul位移图片的i倍，即可实现。

方法一代码：（定位+改变opacity）

<div class="box">
        <ul>
            <li class="active"><img src="/images1/1.jpg"></li>
            <li><img src="/images1/2.png"></li>
            <li><img src="/images1/3.png"></li>
            <li><img src="/images1/4.png"></li>
            <li><img src="/images1/5.png"></li>
            <li><img src="/images1/6.png"></li>
            <li><img src="/images1/7.jpg"></li>
            <li><img src="/images1/8.png"></li>
            <li><img src="/images1/9.png"></li>
            <li><img src="/images1/10.png"></li>
        </ul>
        <div class="prev">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="next">
            <i class="el-icon-arrow-right"></i>
        </div>
        <div class="indicator">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;