slider javascript对象

Question

我想创建一个滑块与JavaScript，自动滑动(超时5000)，手动与上一步和下一步按钮，并与键盘。事实上，我正在寻找YouTube上的教程，我找到了三个代码示例，它们当然可以很好地工作，但不能一起使用。我的导师说我应该使用Object (class)来插入这3张图片。

我知道如何使用构造函数等创建类。但我不明白它是如何处理图像的。我应该使用哪些参数？我可以只为选项(自动，手动，键盘)创建一个功能吗？

我不想使用jQuery。

下面是我必须插入到类中的三个代码示例：

let tabImages = [];
let time = 5000;

// Image list
tabImages = ['images/velovimage.jpg', 'images/velov2.jpg', 'images/pietonvelo.jpg'];

// change Image

function changeImg(){
    document.slide.src = tabImages[i];

    if(i < tabImages.length - 1){
        i++;
    } else {
        i = 0;
    }

    setTimeout("changeImg()", time)
}

window.onload = changeImg;

/*

const img_con = document.getElementById('img-con');
const next = document.getElementById('next');
const prev = document.getElementById('prev');

const images = ['velovimage.jpg', 'velov2.jpg', 'pietonvelo.jpg']

let i = images.length;

// function for next slide

next.onclick = ()=> {
    i = (i<images.length) ?(i= i+1):(i=1);
    img_con.innerHTML = "<img class='img' src=images/"+images[i-1] +">";
}

// function for prev slide
prev.onclick = () => {
    i = (i<images.length+1 && i>1) ?(i = i-1):(i=images.length);
    img_con.innerHTML = "<img class='img' src=images/"+images[i-1] +">";
}

// keyboard

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}
function currentSlide(n) {
    showSlides(slideIndex = n);
}

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            //left
            e.preventDefault();
            slideIndex--;
            showSlides(slideIndex);
            break;
        case 39:
            //right
            e.preventDefault();
            slideIndex++;
            showSlides(slideIndex);
            break;
    }
}
*/

Answer 1

试着看看这个例子，这是一个带有箭头按钮的图像carousel：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery，但添加以下代码以添加箭头键支持：

<script type="text/javascript">
jQuery(function($){
    $(document).keydown(function(e){
        switch(e.keyCode){
            case 37: {//left arrow
                $('.prev').trigger('click');
                break;
            }
            case 39: {//right arrow
                $('.next').trigger('click');
                break;
            }
        }
        if(Math.abs(e.keyCode - 38) === 1){
            e.preventDefault();
        }
    });
});
</script>

请告诉我这是否有效