Native js to achieve simple carousel effect

//A big box for the carousel let oCarousel = document.querySelector('.carousel')
//The parent element of the label for the left and right buttons of the carousel let oChevron = document.querySelector('.chevron')
//Left button let oLeft = document.querySelector('.chevron-left')
//Right button let oRight = document.querySelector('.chevron-right')
//Get the parent element ul where the carousel image is placed
let oUl = document.querySelector('.carousel-body')
//Get the li that contains the carousel image
let oActives = document.querySelectorAll('.indicators li')

function animation(obj,target){
    // Clear the timer clearInterval(obj.timer)
        obj.timer = setInterval(()=>{
            // Read the current position of the element let curX=obj.offsetLeft
 
            //Define a step size let step=10
            // Determine the direction to move (compare the size of the target position with the current position) 
            if(target<curX){
                step=-10
            }
            // According to the relationship between the current position, the target position, and the step length, // As long as the distance between the target position and the current position is less than the step length, the element's position is directly set to the target position if (Math.abs (target-curX) < Math.abs (step)) {
                obj.style.left=target+'px'
                clearInterval(obj.timer)
            }else{
                // Calculate the next step position let nextX=curX+step
                // Assign the next step position to obj.style.left
                obj.style.left=nextX+'px'
            }
        },10)
    }

oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
    }
 
    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
    }

let n = 0
let step = 500
    oLeft.onclick = function () {
        n--
        
        if (n == -1) {
       //When you move to the first picture (n=0), click again (n=-1), set n to 4 and jump to the position of the last picture //The position of the ul containing the carousel picture is changed to the position of the last picture (because the width of a picture is 500px, so the last picture is at 5*500=2500)
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //target is the moving distance, that is: the nth picture * the width of each picture 
        let target = -n * step
        animation(oUl, target)
 
    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
        //When you move to the last picture (n=5), click again (n=6), set n to 1 and jump to the position of the first picture oUl.style.left = 0 + 'px'
            n = 1
        }
        let target = -n * step
        animation(oUl, target)
 
    }

//Because the li obtained above through document.querySelectorAll('.indicators li') is returned in the form of a pseudo array, it is necessary to traverse the pseudo array to bind the click event for each li for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = function () {
            //Set the style of the clicked item to highlight setActive(i)
            //And assign the value of i to n (equivalent to recording that the i-th picture should be displayed currently)
            n = i
            //Set the moving distance let target = -n * step
            animation(oUl, target)
        }
    }
 
    // Encapsulate a function to highlight li function setActive(ind) {
        //Use exclusive thinking: clear all, and then set the class name separately for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'active'
    }

oLeft.onclick = function () {
        n--
        if (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //Call the setActive() function to modify the highlight status of the nth image page number setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        //If n is 5, it means that we have reached the 6th picture (the 6th picture is the same as the 1st picture, but it is used for sliding transition to prevent the effect of instantaneous jump), so we need to set the page number to 0 (the first picture) to highlight. //Here we use a ternary expression. If n is 5, set the 1st picture to highlight, otherwise set the nth picture to highlight. n == 5 ? setActive(0) : setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }

//When loading the page, the timer should be turned on first, otherwise the carousel will not play automatically. It needs to wait for a move-in and move-out event to start the timer timer = setInterval(function () {
            //Call the click event oRight.onclick() bound to the right button
        }, 2000)
 
    //When the mouse moves in, display the left and right arrows and clear the timer oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
        clearInterval(timer)
    }
 
    //When the mouse moves out, hide the left and right arrows and start the timer oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
        timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    }

* {
     margin: 0;
     padding: 0;
        }
 
        .carousel {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .carousel li {
            list-style: none;
        }
 
        /* Carousel content*/
        .carousel-body {
            width: 3000px;
            height: 200px;
            position: absolute;
        }
        .carousel-body li {
            list-style: none;
            float: left;
            width: 500px;
            height: 200px;
        }
 
        .carousel-body li img {
            width: 100%;
            height: 100%;
        }
 
 
        /* Left and right focus buttons */
        .carousel .chevron {
            position: absolute;
            top: 50%;
            height: 40px;
            width: 100%;
            transform: translateY(-50%);
            display: none;
        }
 
        .carousel .chevron-left,
        .carousel .chevron-right {
            width: 40px;
            height: 40px;
            background: #000;
            cursor: pointer;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            font-weight: bold;
            color: #fff;
            opacity: .3;
            border: 1px solid #fff;
        }
 
 
        .carousel .chevron-left {
            float: left;
            margin-left: 10px;
        }
 
 
        .carousel .chevron-right {
            float: right;
            margin-right: 10px;
        }
 
 
        /* 5.2 Carousel indicator structure*/
        .carousel .indicators {
            position: absolute;
            right: 30px;
            bottom: 20px;
        }
 
        .carousel .indicators li {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background: rgba(255, 255, 255, .8);
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            color: rgba(0, 0, 0, .5);
        }
 
        .carousel .indicators li.active {
            background: #09f;
            color: red;
 }

<div class="carousel">
        <!-- Carousel content-->
        <ul class="carousel-body">
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <!-- a3.1 Add a new li that is the same as the first one-->
            <!-- <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> -->
        </ul>
        <!-- Left and right focus buttons -->
        <div class="chevron">
            <div class="chevron-left">&laquo;</div>
            <div class="chevron-right">&raquo;</div>
        </div>
        <!-- 5.1 Carousel indicator structure-->
        <ol class="indicators">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
</div>

let oCarousel = document.querySelector('.carousel')
let oChevron = document.querySelector('.chevron')
let oLeft = document.querySelector('.chevron-left')
let oRight = document.querySelector('.chevron-right')
let oUl = document.querySelector('.carousel-body')
let oActives = document.querySelectorAll('.indicators li')
 
    let n = 0
    let step = 500
    let timer
    timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
        clearInterval(timer)
    }
 
    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
        timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    }
    oLeft.onclick = function () {
        n--
        if (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        n == 5 ? setActive(0) : setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }
    for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = function () {
            setActive(i)
            n = i
            let target = -n * step
            animation(oUl, target)
        }
    }
 
    // Encapsulate a function to highlight li function setActive(ind) {
        for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'active'
    }
 
    function animation(obj,target){
        // Clear the timer clearInterval(obj.timer)
        obj.timer = setInterval(()=>{
            // Read the current position of the element let curX=obj.offsetLeft
 
            //Define a step size let step=10
            // Determine the direction to move (compare the size of the target position with the current position) 
            if(target<curX){
                step=-10
            }
            // According to the relationship between the current position, the target position, and the step length, // As long as the distance between the target position and the current position is less than the step length, the element's position is directly set to the target position if (Math.abs (target-curX) < Math.abs (step)) {
                obj.style.left=target+'px'
                clearInterval(obj.timer)
            }else{
                // Calculate the next step position let nextX=curX+step
                // Assign the next step position to obj.style.left
                obj.style.left=nextX+'px'
            }
        },10)
}