&

求教各位前輩，一個(gè)輪播圖在谷歌瀏覽器下顯示異常的問題！?。?/h1>

新手練習(xí)，寫了一個(gè)無(wú)縫輪播。在火狐和IE11下都運(yùn)行正常，在谷歌瀏覽器下第一次運(yùn)行會(huì)出現(xiàn)某幾張圖片不顯示，但也沒具體的報(bào)錯(cuò)信息，需要手動(dòng)刷新幾次后才能正常顯示。
求教大家?guī)兔纯磫栴}出在哪里？谷歌瀏覽器：版本 64.0.3282.140（正式版本32 位）
圖片描述

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Tab選項(xiàng)卡焦點(diǎn)圖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

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

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

        #banner_imgs {
            width: 4800px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #banner_imgs li {
            float: left;
        }

        #banner_imgs img {
            width: 800px;
            height: 100%;
            display: block;

        }

        #left {
            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;
        }

        #right {
            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;
        }

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

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

        .number_color {
            background-color: red;
        }

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

<body>
    <input id="start" type="button" value="發(fā)送驗(yàn)證碼">
    <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;
            //倒計(jì)時(shí)
            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 = '發(fā)送驗(yàn)證碼';
                        countdown_number = 60;
                        clearInterval(countdown_timer);
                    }
                }, 500);
            };

            for (var y = 0; y < number_a.length; y++) {
                number_a[y].id = y;
                number_a[y].onmouseover = function () {
                    move(this.id, -banner_imgs_width);
                    index = Number(this.id);//此處有大坑，id默認(rèn)類型是字符串類型，需要轉(zhuǎn)換；
                }
            }//設(shè)置index值和當(dāng)前圖的值綁定

            function click_type(click_type) {
                if (click_type.onclick) {
                    if (click_type === right) {
                        if (index === 4) {
                            index = 0;
                        }
                        else {
                            index++
                        }
                    }
                    if (click_type === left) {
                        if (index === 0) {
                            index = 4;
                        }
                        else {
                            index--;
                        }
                    }
                }
            }//點(diǎn)擊函數(shù)，根據(jù)左右點(diǎn)擊類型index值進(jìn)行變化

            function move(index_number, width) {
                for (var i = 0; i < number_a.length; i++) {
                    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';
                }
            }//圖片移動(dòng)位置和當(dāng)前所顯示的紅點(diǎn)

            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>

回答

編輯回答