JavaScript——理解变量的作用

如何解决JavaScript——理解变量的作用

我正在编写网上的教程。它是关于用 JavaScript 控制的幻灯片。我想了解两个变量之间的区别：underwayPicslider 和 underwayPhoto，以及创建最后一个变量 (underwayPhoto) 的动机是什么。

尝试自己做教程，我没有看到 underwayPhoto 的实用性，所以我写了：

underwayPicslider.src = e.target.src; 
underwayPicslider = e.target; 

代替：

underwayPicslider.src = e.target.src;
UnderwayPhoto = e.target; 

它没有用。 所以有什么解释吗？

这里是 JavaScript 代码：

const sliderPortfolio = document.querySelector('.slider-portfolio');
let underwayPicslider = document.querySelector('.img-visible-slider');
const allPicsPortfolio = Array.from(document.querySelectorAll('.grid-item img'));
const rightPortfolio = document.querySelector('.btn-right');
const leftPortfolio = document.querySelector('.btn-left');
const closeSlide = document.querySelector('.btn-close-slider');
let UnderwayPhoto;
let UnderwayIndex;
allPicsPortfolio.forEach(item => {
    item.addEventListener('click',(e) => {
        sliderPortfolio.style.display = "block";
        underwayPicslider.src = e.target.src;
        UnderwayPhoto = e.target;
        UnderwayIndex= allPicsPortfolio.indexOf(UnderwayPhoto);
    })
})
rightPortfolio.addEventListener('click',() => {
    if(UnderwayIndex=== 11) {
        UnderwayIndex= 0;
        underwayPicslider.src = allPicsPortfolio[UnderwayIndex].src;
        UnderwayPhoto = allPicsPortfolio[UnderwayIndex]; /* or allPicsPortfolio[0]; */
        return;
    }
    underwayPicslider.src = allPicsPortfolio[UnderwayIndex+ 1].src;
    UnderwayPhoto = allPicsPortfolio[UnderwayIndex+ 1];
    UnderwayIndex= allPicsPortfolio.indexOf(UnderwayPhoto); /* or UnderwayIndex++; */
})