原生JS实现轮播图

需求：

1. js动态添加小圆点
2. js动态添加最后一张假图片
3. 实现左右焦点图 + 无缝滚动
4. 自动播放
5. 点击小圆点同步切换

核心：改变ul的left值+无缝轮播

/index.html中的css

* {
   margin: 0;
   padding: 0;
   list-style-type: none
}

div.box {
   width: 790px;
   height: 340px;
   margin: 50px auto;
   /* border: 5px solid red; */
   overflow: hidden;
   position: relative;
}

ul {
   width: 900%;
   height: 340px;
   position: absolute
}

ul li {
   float: left;

}

.arrow {
   width: 20px;
   height: 50px;
   background-color: rgba(0, 0, 0, 0.5);
   color: #ccc;
   text-align: center;
   line-height: 50px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 24px;
   font-family: '宋体';
   display: none;
   cursor: pointer;
}

.arrow-l {
   left: 0;
}

.arrow-r {
   right: 0;
}

.arrow-l:hover,
.arrow-r:hover {
   background-color: rgba(0, 0, 0, 0.8);
}

.box:hover .arrow {
   display: block
}

ol {
   height: 20px;
   position: absolute;
   bottom: 0;
   width: 100%;
   text-align: center;
}

ol li {
   width: 16px;
   height: 16px;
   margin: 0 5px;
   border-radius: 8px;
   display: inline-block;
   background-color: aliceblue;
   cursor: pointer;
}

<div class="box">
    <ul>
        <li><a href="javscript:viod(0)"><img src="./images/1.jpg" alt="1.jpg"></a></li>
        <li><a href="javscript:viod(0)"><img src="./images/2.jpg" alt="2.jpg"></a></li>
        <li><a href="javscript:viod(0)"><img src="./images/3.jpg" alt="3.jpg"></a></li>
        <li><a href="javscript:viod(0)"><img src="./images/4.jpg" alt="4.jpg"></a></li>
        <li><a href="javscript:viod(0)"><img src="./images/5.jpg" alt="5.jpg"></a></li>
        <li><a href="javscript:viod(0)"><img src="./images/6.jpg" alt="6.jpg"></a></li>
        <li><a href="javscript:viod(0)"><img src="./images/7.jpg" alt="7.jpg"></a></li>
        <li><a href="javscript:viod(0)"><img src="./images/8.jpg" alt="8.jpg"></a></li>
    </ul>

    <div class="arrow arrow-l"> &lt;</div>
    <div class="arrow arrow-r">&gt;</div>

    <ol>
        <!-- <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li> -->
    </ol>
</div>
<script src="./annimate.js"></script>

//引入的annimate.js

function animation(element, target, speed) {
    clearInterval(element.timerId)
    var current = element.offsetLeft
    var speed = current < target ? speed : -speed
    var abs

    element.timerId = setInterval(function () {
        abs = Math.abs(target - current)

        if (abs >= Math.abs(speed)) {
            element.style.left = current + 'px'
            current += speed
        } else {
            clearInterval(element.timerId)
            element.style.left = target + 'px'
        }

    }, 20)
}

//js
var box = document.querySelector('.box')
var ul = document.querySelector('.box ul')
var ol = document.querySelector('.box ol')
var arrow_l = document.querySelector(".box .arrow-l");
var arrow_r = document.querySelector(".box .arrow-r");
var imgs = ul.children;
var count = 0//表示左边出去了几张


// js动态添加小圆点
for (var i = 0; i < ul.children.length; i++) {
ol.appendChild(document.createElement('li'))
}
//点击小圆点同步切换
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].index = i
ol.children[i].onclick = function () {
// console.log(this.index);
//排他思想
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].style.backgroundColor = 'aliceblue'
}
this.style.backgroundColor = 'red'
ul.style.left = -this.index * box.offsetWidth + 'px'
count = this.index
}
}


//js动态添加最后一张假图片
var fake_img = ul.firstElementChild.cloneNode(true)
ul.appendChild(fake_img)
ol.children[0].style.backgroundColor = 'red'

//实现左右焦点图 + 无缝滚动
arrow_r.onclick = function () {
if (count >= ul.children.length - 1) {
count = 0
ul.style.left = -count * box.offsetWidth + 'px'
}
count++
animation(ul, -count * box.offsetWidth, 30)
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].style.backgroundColor = 'aliceblue'
}
if (count >= ul.children.length - 1) {
ol.children[0].style.backgroundColor = 'red'
} else {
ol.children[count].style.backgroundColor = 'red'
}

}
arrow_l.onclick = function () {
if (count <= 0) {
count = ul.children.length - 1
ul.style.left = -count * box.offsetWidth + 'px'

}
count--
animation(ul, -count * box.offsetWidth, 30)
for (var j = 0; j < ol.children.length; j++) {

ol.children[j].style.backgroundColor = 'aliceblue'
}
ol.children[count].style.backgroundColor = 'red'

//自动播放
var timeId = setInterval(arrow_r.onclick, 2000)
box.onmouseover = function () {
clearInterval(timeId)
}
box.onmouseout = function () {
timeId = setInterval(arrow_r.onclick, 2000)
}