仿写网页轮播图 利用排他思想这报错了

网页轮翻图

试了好多次老是老报错，找不到原因
然后后面就无法继续写
怎么办 怎么办

<script>
        var box = document.querySelector('.box');
        var zjt = document.querySelector('.zjt');
        var yjt = document.querySelector('.yjt');
        // var xyd=document.querySelector('.xyd');
        // 1.鼠标经过后左箭头和右箭头显示，离开消失
        box.addEventListener('mouseenter', function () {
            zjt.style.display = 'block';
            yjt.style.display = 'block';
        })
        box.addEventListener('mouseleave', function () {
            zjt.style.display = 'none';
            yjt.style.display = 'none';
        })
        // // 2.动态生成小圆点，思路：将图片的数目给小圆点
        var tp = document.querySelector('.tp');
        var ol = document.querySelector('ol');
        // console.log(tp.children.length);
        // 获取图片的数目
        for (var i = 0; i < tp.children.length; i++) {
            // 创建li

            var li = document.createElement('li');
            // 插入li
            ol.appendChild(li);

            //     console.log(li);
            //     // 设置索引号
            //     li.setAttribute('index', i);
            //     // 让第一个小圆圈添加到ys里面
            //     // 3.点击小圆点变色用排他思想
            li.addEventListener('click', function () {
                // var index = this.getAttribute('index');
                // var boxWidth = box.offsetWidth;
                for (var i = 0; i <= ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'ys';
                // console.log(index);
                // animate(tp, -index * boxWidth)

            })
            ol.children[0].className = 'ys';

        }

    </script>

结构部分

 <div class="box">
        <a href="" class="yjt">&lt;</a>
        <a href="" class="zjt">&gt;</a>
        <!-- 图片 -->
        <ul class="tp">
            <li>
                <a href="#"><img src="img1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img4.jpg" alt=""></a>
            </li>

        </ul>
        <!-- 小圆点 -->
        <ol>

        </ol>

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            position: relative;
            margin: 100px auto;
            overflow: hidden;
            width: 600px;
            height: 330px;
            background-color: pink;
        }

        .tp img {
            width: 600px;
            height: 330px;
        }

        .yjt {
            width: 20px;
            height: 30px;
            display: block;
            line-height: 30px;
            color: #fff;
            z-index: 999;
            text-align: center;
            text-decoration: none;
            background: rgba(158, 154, 154, .7);
            position: absolute;
            top: 150px;
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            display: none;

        }

        .zjt {
            width: 20px;
            height: 30px;
            display: block;
            line-height: 30px;
            color: #fff;
            z-index: 999;
            text-align: center;
            text-decoration: none;
            background: rgba(158, 154, 154, .7);
            position: absolute;
            top: 150px;
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            display: none;


        }

        .tp {
            width: 600%;
        }

        .tp li {
            float: left;
        }

        ol {
            /* width: 75px; */
            height: 14px;
            position: absolute;
            bottom: 15px;
            left: 40px;
            border-radius: 7px;
            background: rgba(158, 154, 154, .7);
        }

        ol li {
            float: left;
            width: 8px;
            height: 8px;
            margin: 3px;
            /* 圆形 */
            border-radius: 50%;
            background-color: #fff;
        }

        .ys {
            background-color: rgb(32, 234, 85);
        }
    </style>