js achieve seamless Amoy Lun broadcast an effect, with full source code parsing version (another update .....)

Preface:

I am a pure white, there are many places you do not understand the big cattle so well, if wrong, please point out the large cattle treatise! Grateful brother.

This article is to analyze your native JS wrote Taobao seamless carousel effect diagram

demand analysis:

HTML requirements

 1. 首先要有一个可视区域（banner）

 2. 在可视区域（banner）下有一个存放图片的区域（imgs）

 3. 在可视区域（banner）下还要有一个存放小圆点的区域（dots）

 4. 在可视区域（banner）下还要有一个存放按钮的区域 （arrow）

CSS demand

 1. 可视区域（banner）设置定宽，超出区域需要隐藏

 2. 在可视区域（imgs）下的所有图片需要在一行内显示[imgs宽度会在JS中动态生成]

 3. 小圆点的区域（dots）下的所有子元素设置为小圆点样式

 4. 按钮的区域 （arrow）下的两个图标设置定位。[本文采用的是 &lg; &lt;请自行替换为图标]

JS demand

 1. 可以根据用户的配置信息更改轮播图

 2. 要求能够无缝轮播（头和尾都要增加一张图片）能够形成 5-1-2-3-4-5-1 的布局

 3. ----小圆点的区域（dots）下的所有子元素设置为小圆点样式

 4. ----按钮的区域 （arrow）下的两个图标设置定位。[本文采用的是 &lg; &lt;请自行替换为图标]

HTML structure:


    <div class="banner">
        <div class="imgs">
            <a href=""><img src="img/1.jpg" alt=""></a>
            <a href=""><img src="img/2.webp" alt=""></a>
            <a href=""><img src="img/3.jpg" alt=""></a>
            <a href=""><img src="img/4.jpg" alt=""></a>
            <a href=""><img src="img/5.webp" alt=""></a>
        </div>
        <div class="dots">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="arrow">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

See results

CSS style:

* {
    margin: 0;
    padding: 0;
}

.banner {
    position: relative;
    width: 520px;
    height: 280px;
    border: 2px solid #000000;
    margin: 100px auto;
    /* overflow: hidden; */
}

.banner .imgs img {
    display: block;
    width: 520px;
    height: 280px;
}

.banner .imgs a {
    float: left;
}

.banner .dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 10px;
    padding: 2px 4px;
}

.banner .dots span {
    float: left;
    width: 8px;
    height: 8px;
    margin: 2px;
    background-color: seashell;
    border-radius: 50%;
    cursor: pointer;
}

.banner .dots span.active {
    background-color: skyblue;
}
.banner .arrow {
    /* display: none; */
}

.banner:hover .arrow {
    display: block;
}

.banner .arrow .item {
    cursor: pointer;
    width: 20px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 125px;
    background-color: rgba(0, 0, 0, .3);
    padding-left: 3px;
    box-sizing: border-box;
}

.banner .arrow .item.left {
    border-radius: 0 17px 17px 0;
}

.banner .arrow .item.right {
    right: 0;
    border-radius: 17px 0 0 17px;
}