原生js轮播图的实现

1.原生轮播图的自动轮播图

        很多网站都有轮播图，我这里为大家简答的介绍一下,如果有些的不对的地方请大家及时提出意见，也希望给大家带来帮助。

原理:

       将一些图片在一行中平铺，然后通过(css样式去做一个隐藏和默认显示),在用js计算偏移量再利用定时器实现定时轮播。

    <div id="slider">
        <!-- 图片部分 -->
        <ul class="slider-list">
            <!-- <li><a href="#"><img src="./img/5.jpg"></a></li> -->
            <li style="background:#453a94;">1</li>
            <li style="background:#fff1eb;">2</li>
            <li style="background:#4facfe;">3</li>
            <li style="background:#96e6a1;">4</li>
            <li style="background:#fda085;">5</li>
            <li style="background:#a18cd1;">6</li>
        </ul>
        <!-- 小点部分 -->
        <div class="dot-list">
            <span class="dot cur"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <!--箭头布分 -->
        <a href="#" class="arraw prev" id="left">
            <span></span>
        </a>
        <a href="#" class="arraw next" id="right">
            <span></span>
        </a>

    </div>

ul和li里面是图片,看自己需要几张就写几个li

小圆点部分是那个可以点击切换部分这个是根据图片来设置圆点的个数的不是自己想设置多少

箭头部分是分为左边和右边

2.css样式

  /* 主体部分 */
        
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #slider {
            position: relative;
            width: 680px;
            height: 340px;
            margin: 100px auto;
            /* outline: 2px solid red; */
            overflow: hidden;
        }
        
        .slider-list {
            display: flex;
            position: relative;
            left: 0px;
            width: 100%;
            height: 100%;
            transition: all 1s;
        }
        
        .slider-list li {
            flex-shrink: 0;
            width: 680px;
            height: 340px;
        }
        
        .do