关于#前端#的问题，如何解决？

js部分：

  let allA=document.getElementsByClassName("list_a");
    let photo=document.getElementsByClassName("photo");
    for( let i=0;i<allA.length;i++){
        allA[i].onclick= function () {
            photo.style.left=-500*i+"px";
    }}

html:

<div class="show" style="float: left;width: 600px;height: 300px;overflow: hidden;margin-left:60px;">
            <div class="photo">
                <div ><a href="#"><img  src="resouce/图一.png"></a></div>
                <div ><a href="#"><img  src="resouce/图二.png"></a></div>
                <div><a href="#"><img   src="resouce/图三.png"></a></div>
                <div ><a href="#"><img  src="resouce/图四.png"></a></div>
                <div><a href="#"><img  src="resouce/图五.png"></a></div>
            </div>
                <div class="spot" style="background-color: #29323d;width: 600px;position: absolute;bottom:10px">
                <div class="spot_list" ><a href="#" class="list_a">相亲对象是神明女</a></div>
                <div class="spot_list"><a href="#" class="list_a">修仙从第三次转生开始</a></div>
                <div class="spot_list"><a href="#" class="list_a">听说我是神探</a></div>
                <div class="spot_list"><a href="#" class="list_a">终宋</a></div>
                 <div class="spot_list"><a href="#" class="list_a">笑傲江湖</a></div></div></div>

css:

photo{
    position: absolute;
    width: 3000px;
}
.show{
    float: left;
    position: relative;
    overflow: hidden;

}
.spot_list{
    width: 20%;
    float: left;
    text-align:center;
}
.spot_list a{
   text-decoration:none;
    color: #ffffff;
}

.

你的第一个 getElementsByClassName 拿到的是一个集合
那么你第二个 getElementsByClassName 拿到的就不是集合了？

遇到了什么问题

问题发出来呢

看你想问的大概是，点击下面的文字上面的图片会移动到对应的地方