问题遇到的现象和发生背景
问题相关代码，请勿粘贴截图
<head>
<meta charset="utf-8">
<title>垂直选项栏</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body{
background-color: #f7f7f7;
}
.box{
width: 500px;
height: 400px;
background-color: white;
margin: 100px auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 5px 5px 10px gray;
}
.box .left{
position: relative;
width: 20%;
height: 100%;
float: left;
}
.scroll{
position: absolute;
top: 0;
left: 96px;
width: 4px;
height: 100px;
background-color: orange;
border-radius: 10px;
transition: all .2s ease-in-out;
}
.box .right{
width: 80%;
height: 100%;
float: right;
}
.box .left ul li{
cursor: pointer;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
font-size: 20px;
border-bottom:2px solid gray ;
box-sizing: border-box;
box-shadow: 5px 5px 10px gray;
}
.box .right ul li{
position: relative;
width:0px ;
height: 0px;
text-align: center;
line-height: 600px;
overflow: hidden;
box-shadow: 5px 3px 5px gray;
transition: all .2s;
z-index: 0;
}
.box .right ul li p{
position: absolute;
display: inline-block;
top: 20px;
right: 180px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div class="scroll"></div>
<ul>
<li>点赞</li>
<li>投币</li>
<li>评论</li>
<li>转发</li>
</ul>
</div>
<div class="right">
<ul>
<li><img src="./img/点赞.png" alt="">
<p>DianZan</p>
</li>
<li><img src="./img/娱乐宝.png" alt="">
<p>TouBi</p></li>
<li><img src="./img/评论.png" alt="">
<p>PingLun</p></li>
<li><img src="./img/编辑.png" alt="">
<p>ZhuanFa</p></li>
</ul>
</div>
</div>
<script>
var left = document.querySelectorAll('.left ul li')
var right = document.querySelectorAll('.right ul li')
var scroll = document.querySelector('.scroll')
for(let i = 0 ; i<left.length ; i++){
left[i].addEventListener('click',function(){
var len = i * 100 +'px'
scroll.style.transform = 'translateY('+len+')'
for(var i = 0 ; i<right.length ; i++){
right[i].style.width = 400+'px'
right[i].style.height = 500 + 'px'
}
})
for(let i = 0 ; i < left.length ; i++){
left[i].addEventListener('mouseout',function(){
for(let i = 0 ; i < right.length ; i++){
if(right[i].style.width == 400+'px'&&right[i].style.height == 500 + 'px'){
right[i].style.width = 0 +'px'
right[i].style.height = 0 + 'px'
}
}
})
}
}
</script>
</body>
//这是代码中的图片，都是从阿里那个素材网站找的
js还没有学完，代码可能有些乱，多多包涵，谢谢各位
运行结果及报错内容
我每点击不同事件，总会出来第一张图片，不会出现第二张图片
我的解答思路和尝试过的方法
目前没有想到
我想要达到的结果
点击每个事件出现对应图片
