Javascript 尝试使用纯JS垂直旋转木马时出错

我试图做的是设置一个类似于垂直旋转木马的东西，当在向下和向上方向分别选择一个按键时，“projects”ID中的h1将居中

我尝试了许多不同的方法，但只遇到了错误

尝试更改类（将附加一些代码，因为这是一个更简单的概念）

正在尝试内联翻译

两者都没有成功

HTML:

JS:

//项目滑块内容事件//
var itemsslider=document.getElementById（“项目”）；
var project1=document.getElementById（“project1”）；
var project2=document.getElementById（“project2”）；
var project3=document.getElementById（“project3”）；
var active=document.querySelector（“.active”）；
var listItems=document.queryselectoral（“.items”）；
var currentItem=1；
函数translateUp（）{
如果（itemSlider.classList==“较低”）{
itemSlider.classList.remove（“lower”）；
itemSlider.classList.add（“中间”）；
};
如果（itemSlider.classList==“中间”）{
itemSlider.classList.remove（“中间”）；
itemSlider.classList.add（“上限”）；
}
};
函数translateDown（）{
如果（itemSlider.classList==“上限”）{
itemSlider.classList.remove（“上限”）；
itemSlider.classList.add（“中间”）；
};
如果（itemSlider.classList==“中间”）{
itemSlider.classList.remove（“中间”）；
itemsslider.classList.add（“lower”）；
}
};
文件.添加的EventListener（“向下键”，功能检查键（e）{
如果（slideWrapper.classList==“projectsActive”）{
如果（如键码==“38”）{
translateUp（）；
}
如果（例如，keyCode==“40”）{
translateDown（）；
}
}
});
//**理想情况下，我希望下面的代码能够正常工作，因为它是用活动
//阶级**//
listItems[currentItem].classList.add（“活动”）；
文档.添加的事件列表器（“键控”，函数（事件）{
如果（slideWrapper.classList==“projectsActive”）{
开关（event.keyCode）{
案例38：
listItems[currentItem].classList.remove（“活动”）；
currentItem=currentItem>0？--currentItem:0；
listItems[currentItem].classList.add（“活动”）；
打破
案例40：
listItems[currentItem].classList.remove（“活动”）；
currentItem=currentItem

理想情况下，按下向上键时，我希望中间h1上方的h1向下推动中间h1，使其在页面上垂直居中（因此是平移），而按下向下键则相反。我希望这是类似于一个水平旋转木马

免责声明——我正在尝试改进Javascript，因此是普通代码。如果我的编码不符合标准，请原谅我，因为我仍在积极自学

<div id="projects" class="content middle">
  <div id="project1" class="items">
    <h1>Project 1</h1>
  </div>
  <div id="project2" class="items">
    <h1>Project 1</h1>
  </div>
  <div id="project3" class="items">
    <h1>Project 1</h1>
  </div>
</div>

.middle {
    transform: translate(0,0%);
}

.upper {
    transform: translate(0,50%);
}

.lower {
    transform: translate(0,-50%);
}

.items {
    position: relative;
    width: 70%;
    height: 50%;
    top: -25%;
    left: 50%;
    transform: translate(-50%,0%);
}

.items h1 {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    font-size: 10rem;
    letter-spacing: 2.5px;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #95cfb4;
}

.active h1 {
    color: #95cfb4;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: #95cfb4;
}

.active h1:hover{
    font-size: 11rem;
}

// PROJECT SLIDER CONTENT EVENT //

var itemSlider = document.getElementById("projects");
var project1 = document.getElementById("project1");
var project2 = document.getElementById("project2");
var project3 = document.getElementById("project3");
var active = document.querySelector(".active");
var listItems = document.querySelectorAll(".items");
var currentItem = 1;

function translateUp(){
    if(itemSlider.classList == "lower"){
        itemSlider.classList.remove("lower");
        itemSlider.classList.add("middle");
    };
    if(itemSlider.classList == "middle"){
        itemSlider.classList.remove("middle");
        itemSlider.classList.add("upper");
    }
};

function translateDown(){
    if(itemSlider.classList == "upper"){
        itemSlider.classList.remove("upper");
        itemSlider.classList.add("middle");
    };
    if(itemSlider.classList == "middle"){
        itemSlider.classList.remove("middle");
        itemSlider.classList.add("lower");
    }
};

document.addEventListener("keydown", function checkKey(e){
    if(slideWrapper.classList == "projectsActive"){
        if(e.keyCode == "38"){
            translateUp();
        }
        if(e.keyCode == "40"){
            translateDown();
        }
    }
});

//**IDEALLY I WANT THE BELOW CODE TO WORK AS IT IS SET UP WITH THE ACTIVE 
//CLASS**//

listItems[currentItem].classList.add("active");

document.addEventListener("keydown", function(event){
    if(slideWrapper.classList == "projectsActive"){
        switch(event.keyCode){
            case 38:
                listItems[currentItem].classList.remove("active");
                currentItem = currentItem > 0 ? --currentItem : 0;
                listItems[currentItem].classList.add("active");
                break;
            case 40:
                listItems[currentItem].classList.remove("active");
                currentItem = currentItem < listItems.length-1 ? ++currentItem : listItems.length-1;
                listItems[currentItem].classList.add("active");
                break;
        }
    }
});