javascript - slider JavaScript 对象

Question

我想用 JavaScript 创建一个 slider ，自动滑动(超时 5000)，并使用上一个和下一个按钮以及键盘手动滑动。事实上，我正在 YouTube 上寻找教程，我发现了三个可以正常工作的代码示例，但当然不能一起使用。我的导师说我应该使用对象(类)来插入这 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

尝试查看此示例，这是一个带有箭头按钮的图像轮播: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>

告诉我这是否有效