Ask the seniors, the problem of an abnormal display of a broadcast picture in Google browser!

novice practice, write a seamless rotation. It works well under Firefox and IE11. The first time it runs under Google browser, some pictures will not be displayed, but there is no specific error message. It needs to be manually refreshed several times before it can be displayed normally.
ask for help to see what the problem is? Google browser: version 64.0.3282.140 (official version 32-bit)
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Tab</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        -sharpstart {
            display: block;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        -sharpbanner {
            width: 800px;
            height: 450px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        -sharpbanner_imgs {
            width: 4800px;
            position: absolute;
            left: 0;
            top: 0;
        }

        -sharpbanner_imgs li {
            float: left;
        }

        -sharpbanner_imgs img {
            width: 800px;
            height: 100%;
            display: block;

        }

        -sharpleft {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px 20px 20px 0;
            border-color: transparent red;
            position: absolute;
            top: calc(50% - 20px);
            left: 0;
            background-color: RGBA(0, 0, 0, .3);
            display: none;
        }

        -sharpright {
            border-style: solid;
            border-width: 20px 0 20px 20px;
            border-color: transparent red;
            position: absolute;
            top: calc(50% - 20px);
            left: calc(100% - 20px);
            background-color: RGBA(0, 0, 0, .3);
            display: none;
        }

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

        -sharpnumber a {
            display: inline-block;
            width: 20px;
            border: 1px solid red;
            height: 10px;
        }

        .number_color {
            background-color: red;
        }

        -sharpleft:hover,
        -sharpright:hover {
            background-color: RGBA(0, 0, 0, .7);
        }
    </style>
</head>

<body>
    <input id="start" type="button" value="">
    <div id="banner">
        <div id="banner_ul">
            <ul id="banner_imgs">
                <li>
                    <a href="javascript：">
                        <img src="https://youngfever.coding.me/jiaodian1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript：">
                        <img src="https://youngfever.coding.me/jiaodian2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript：">
                        <img src="https://youngfever.coding.me/jiaodian3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript：">
                        <img src="https://youngfever.coding.me/jiaodian4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript：">
                        <img src="https://youngfever.coding.me/jiaodian5.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div id="number">
            <a class="number_color" href="javascript："></a>
            <a href="javascript："></a>
            <a href="javascript："></a>
            <a href="javascript："></a>
            <a href="javascript："></a>
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </div>

    <script>
        window.onload = function () {
            var start = document.getElementById("start");
            var countdown_number = 60;
            var countdown_timer = null;
            //
            var banner_imgs = document.getElementById("banner_imgs");
            var banner = document.getElementById("banner");
            var number = document.getElementById("number");
            var number_a = number.getElementsByTagName("a");
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            var index = 0;
            var banner_imgs_width = banner_imgs.getElementsByTagName("img")[0].width;
            var timer = "";


            start.onclick = function () {
                countdown_timer = setInterval(function () {
                    start.disabled = "ture";
                    start.value = countdown_number-- + "";
                    if (countdown_number === 0) {
                        start.disabled = "";
                        start.value = "";
                        countdown_number = 60;
                        clearInterval(countdown_timer);
                    }
                }, 500);
            };

            for (var y = 0; y < number_a.length; yPP) {
                number_a[y].id = y;
                number_a[y].onmouseover = function () {
                    move(this.id, -banner_imgs_width);
                    index = Number(this.id);//id;
                }
            }//index

            function click_type(click_type) {
                if (click_type.onclick) {
                    if (click_type === right) {
                        if (index === 4) {
                            index = 0;
                        }
                        else {
                            indexPP
                        }
                    }
                    if (click_type === left) {
                        if (index === 0) {
                            index = 4;
                        }
                        else {
                            index--;
                        }
                    }
                }
            }//index

            function move(index_number, width) {
                for (var i = 0; i < number_a.length; iPP) {
                    banner_imgs.style.left = index_number * width + "px";
                    if (number_a[i].className === "number_color") {
                        number_a[i].className = "";
                    }
                    number_a[index_number].className = "number_color";
                }
            }//

            banner.onmouseover = function () {
                stop();
                right.style.display = "block";
                left.style.display = "block";
            };

            banner.onmouseout = function () {
                play();
                right.style.display = "none";
                left.style.display = "none";
            };

            left.onclick = function () {
                click_type(left);
                move(index, -banner_imgs_width);

            };

            right.onclick = function () {
                click_type(right);
                move(index, -banner_imgs_width);
            };

            function play() {
                timer = setInterval(
                    function () {
                        right.onclick();
                    }, 1500)
            }

            function stop() {
                clearInterval(timer)
            }

            play();
        }
    </script>
</body>

</html>