JS realizes picture carousel horse-drawn

<div class="wrapper">
<div ><!--Picture display area box-->
  <ul ><!--Show all pictures in the box-->
     <li>
        <img src="./img/" alt="No pictures yet">
     </li>
     <li>
       <img src="./img/" alt="No pictures yet">
     </li>
     <li>
        <img src="./img/" alt="No pictures yet">
     </li>
     <li>
        <img src="./img/" alt="No pictures yet">
     </li>
  </ul>
  <ul >
    <li class="selected"></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</div>

.wrapper{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 870px;
}
#container{
    width: 1920px;
    height: 870px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-color: #aa201c;
}
#imglist{
    width: 7680px;
    height: 870px;
    list-style-type: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#imglist>li{
    width: 1920px;
    height: 870px;
    float: left;
    overflow: hidden;
}
#point{
    list-style-type: none;
    position: absolute;
    bottom: 5px;
    left: 50%;
    /* right: 0; */
    /* margin: auto; */
    width: 100%;
    height: 29px;
    line-height: 29px;
    z-index: 10;
}
#point>.selected{
    background-color: #aa201c;
}
#point>li{
    width: 16px;
    height: 16px;
    float: left;
    background-color: #c5c8ce;
    border-radius: 100%;
    margin-right: 10px;
    -webkit-border-radius: 100%;
}

var wrap = ("container");
var inner = ("imglist");
var spanList = ("point").getElementsByTagName("li");
var left = ("left");
var right = ("right");

var clickFlag = true;//Set left and right switching marks to prevent continuous pressingvar time//Mainly used to set the timer for automatic slidingvar index = 0;//Record the subscript of each sliding imagevar Distance = ;//Get the width of the display area, that is, the width of each picture//Define the function of image slidingfunction AutoGo() {
    var start = ;//Get the start coordinate of the current left of the moving block    var end = index * Distance * (-1);//Get the coordinates at which the movement block ends.    //The calculation formula is that when moving to the third picture, the subscript of the picture is 2 times the width of the picture is the left value of the block.    var change = end - start;//Offset
    var timer;//Use timer to add animation effects to the picture    var t = 0;
    var maxT = 30;
    clear();//Clear the button status first, and then let the corresponding button change the state    if (index == ) {
        spanList[0].className = "selected";
    } else {
        spanList[index].className = "selected";
    }
    clearInterval(timer);//Clean the previous clear before turning on the timer    timer = setInterval(function () {
        t++;
        if (t >= maxT) {//Stop timer when the picture reaches the end point            clearInterval(timer);
            clickFlag = true;//You can switch when the picture reaches the end point        }
         = change / maxT * t + start + "px";// Make the block move every 17 milliseconds        if (index ==  && t >= maxT) {
             = 0;
            index = 0;
            // When the image reaches the last one, it instantly switches back to the first one, since the same picture will not affect the effect        }
    }, 17);
}
//Writing a function to slide the picture to the rightfunction forward() {
    index++;
    // When the image is marked to the last picture, change the small label to 0    if (index > ) {
        index = 0;
    }
    AutoGo();
}
//Writing a function to slide the picture to the leftfunction backward() {
    index--;
    //When the image is marked to the first one, let it return to the second to last one,    //The left value must be changed to the last one to not affect the transition effect    if (index < 0) {
        index =  - 1;
         = (index + 1) * Distance * (-1) + "px";
    }
    AutoGo();
}

//Open the timer for automatically sliding the picture to the righttime = setInterval(forward, 3000);

//Set the mouse hover animation stop = function () {
    clearInterval(time);
}
 = function () {
    time = setInterval(forward, 3000);
}
//Travel through each button and switch it to the corresponding picturefor (var i = 0; i < ; i++) {
    spanList[i].onclick = function () {
        index =  - 1;
        AutoGo();
    }
}
//Clear all button status colors on the pagefunction clear() {
    for (var i = 0; i < ; i++) {
        spanList[i].className = "";
    }
}