How to make moveToPrev moveToNext work?

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="p8.css">
    <script src="p8.js"></script>
</head>
<body onload="setInterval(startMove,3000)">
    <div id="comment"></div>
    <div id="outer">
        <div id="main">
            <div id="prev" onclick="moveToPrev()"><</div>
            <div id="next" onclick="moveToNext()">></div>
            <ul id="box" onmouseover="showButton()" onmouseout="hideButton()">
                <li><img src="image/i1.png" alt=""></li>
                <li><img src="image/i2.png" alt=""></li>
                <li><img src="image/i3.png" alt=""></li>
                <li><img src="image/i2.png" alt=""></li>

            </ul>
        </div>
    </div>
</body>
</html>

css

*{
    margin:0;
    padding:0;
}

-sharpcomment{
    width:800px;
    height:80px;
    border:1px solid red;
    margin:0 auto;
}

-sharpouter{
    width:800px;
    height:450px;
    border:1px solid black;
    margin:0 auto;
}

-sharpmain{
    width:800px;
    height:450px;
    position:absolute;
    overflow:hidden;
}

img{
    width:800px;
    height:450px;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    top:0;
    left:0;
    width:3200px;
    border:1px solid green;
    height:540px;
}

ul li{
    list-style:none;
    float:left;
}

-sharpprev{
    width:40px;
    height:60px;
    background-color:rgba(160,220,240,0.8);
    font-size:40px;
    font-weight:bold;
    position:absolute;
    left:10px;
    top:45%;
    z-index:100;
    text-align:center;
    line-height:60px;
    display:none;
}

-sharpprev:hover{
    display:block;
}

-sharpnext{
    width:40px;
    height:60px;
    background-color:rgba(160,220,240,0.8);
    font-size:40px;
    font-weight:bold;
    position:absolute;
    right:10px;
    top:45%;
    z-index:100;
    text-align:center;
    line-height:60px;
    display:none;
}

-sharpnext:hover{
    display:block;
}

var imgCount = 4;
var imgWidth = 800;
function startMove() {
    var box = document.getElementById("box");
    if(box.offsetLeft <= -1*imgWidth*(imgCount-1)){
        moveToStart();
    }
    else{
        moveToNext();
    }
}

function moveToNext(){
    box.style.transition = "all 2s ease-in-out";
    box.style.left = box.offsetLeft - imgWidth + "px";
}

function moveToPrev(){
    box.style.transition = "all 2s ease-in-out";
    box.style.left = box.offsetLeft + imgWidth + "px";
}

function moveToStart() {
    box.style.transition = "all 2s ease-in-out";
    box.style.left = box.offsetLeft + (imgCount-1)*imgWidth + "px";
}

function showButton(){
    document.getElementById("prev").style.display = "block";
    document.getElementById("next").style.display = "block";
}

function hideButton(){
    document.getElementById("prev").style.display = "none";
    document.getElementById("next").style.display = "none";
}

existing problem,
1: mouse on the left and right < or >, cursor flashes
2: mouse over < or > right click, moveToPrev moveToNext

is not triggered

how to modify the above code?

together with the information of the picture, please package and download the test

html css js image material, please download and test