JS做轮播图起步遇到问题，可以教怎么改吗

做轮播图，绑定出现错误，只有点击第一个元素才会执行click事件，我想做类似淘宝首页的那种轮播图样式。救命

  <div class="container">
            <div class="banner">                
                <ul class="img-list">
                    <li>
                        <a href="#">
                            <img src="img1.jpg" alt="1">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img2.jpg" alt="2">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img3.jpg" alt="3">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img4.jpg" alt="4">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img5.jpg" alt="5">
                        </a>
                    </li>
                </ul>
                <div class="txt-bg">
                    <div class="pointer">
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                      <a href="javascript:;"></a>
                    </div>
                </div>
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>

<script>
window.addEventListener('load',function(){
    let txt_bg=document.getElementsByClassName("txt-bg")[0]
    var pointer=txt_bg.querySelector('.pointer');
    var a=pointer.querySelector('a');
    pointer.children[0].className = 'current';
    a.addEventListener('click',function(){
        for(var i=0;i<pointer.children.length;i++){
            pointer.children[i].className='no';  
        }      
        this.className='current';
    })   
})
</script>

出现什么错误？最好贴出html代码，要不看这个代码看不出什么问题
var a=pointer.querySelector('a')这个只返回第一个a元素，题主只有点击第一个元素才会执行click事件。猜测题主是不是获取所有的a，点击对应的a进行样式切换？

如果是应该获取所有的a绑定click事件。要不只有一个a有click事件，点击这个a就只有一个效果，永远这个a获取current样式效果，其他都没有。

img

<div class="txt-bg">
    <div class="pointer">
        <a>A-Click Me 1</a> 
        <a>A-Click Me 2</a> 
        <a>A-Click Me 3</a> 
        <a>A-Click Me 4</a>
    </div>
</div>
<style>.current{color:#f00}</style>
<script>
    window.addEventListener('load', function () {
        let txt_bg = document.getElementsByClassName("txt-bg")[0]
        var pointer = txt_bg.querySelector('.pointer');
        var as = pointer.querySelectorAll('a');
        pointer.children[0].className = 'current';
        for (var i = 0; i < as.length; i++)
            as[i].addEventListener('click', function () {
                for (var i = 0; i < pointer.children.length; i++) {
                    pointer.children[i].className = 'no';
                }
                this.className = 'current';
            })
    });
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~

把第9行的var 换成let试试，只有这些代码感觉看不出来问题