javascript - 单击以全屏显示时如何从 JavaScript 传递索引？

Question

所以我正在尝试使用javascript制作一个动态滑块。如何让图像的索引进入全屏部分，以便我可以使用按钮在图像之间移动？

<script type="text/javascript">
let imgs = [
    'https://images.pexels.com/photos/3484061/pexels-photo-3484061.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
    'https://images.pexels.com/photos/5137655/pexels-photo-5137655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/3484061/pexels-photo-3484061.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
    'https://images.pexels.com/photos/5137655/pexels-photo-5137655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/3484061/pexels-photo-3484061.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
    'https://images.pexels.com/photos/5137655/pexels-photo-5137655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
];


let i;

for (i = 0; i < imgs.length; i++) {
    //places thumbnails
    let imgThumb = new Image();
    imgThumb.src = imgs[i];
    let newThumb = document.createElement("div");
    imgThumb.className = "responsive-picture thumbnail";
    imgThumb.id = "thumb" + i;
    document.getElementById("slider1").appendChild(imgThumb);
}

let expandId = document.querySelector("#slider1");
//collects the clicked pictures source
expandId.addEventListener('click', function(c) {
    if (c.target.className == 'responsive-picture thumbnail') {
        let expandedSource = c.target.src;
        console.log('source is', expandedSource.indexOf(imgs));
        showFullScreen(expandedSource);
    }

})

let myIndex = document.querySelectorAll(".thumbnail");
console.log(myIndex);

function expand() {
    // expands / removes full screen widget
    let expander = document.getElementById("fullScreen");
    if (expander.classList) {
        expander.classList.toggle("show-hide");
    } else {
        let classes = expander.className.split(" ");
        var i = classes.indexOf("show-hide");

        if (i > 4)
            classes.splice(i, 1);
        else {
            classes.push("show-hide");
            element.className = classes.join(" ");
        }
    }
}


function showFullScreen(expandedSource) {
    expand()
    let exPic = new Image();
    exPic.src = expandedSource
    let newThumb = document.createElement("img");
    let expandCont = document.getElementById("expandedImg");
    exPic.className = "full-screen-pic";
    if (expandCont.hasChildNodes = false) {
        expandCont.appendChild(exPic);
        return expandedSource;
    } else {
        expandCont.replaceChild(exPic, expandCont.childNodes[0]);
        return expandedSource;
    }

}
/* 
    function slideshow() {
        let slides = document.getElementsByClassName("responsive-picture thumbnail");
        for (s in slides) {
            console.log()

        }
    }

    function changeFsSlide(n) {
        slideshow();
        console.log('go backwards yet??')
    } */


//button listners
let fsExit = document.querySelector("#sl-exit");
fsExit.addEventListener("click", function(e) {
    expand()
})

let fsPrev = document.querySelector("#fs-prev");
fsPrev.addEventListener("click", function(e) {
    // i--;
    console.log(i);
})

let fsNext = document.querySelector("#fs-next");
fsNext.addEventListener("click", function(e) {
    if (i >= imgs.length) {
        i = 0;
    }
    i++;
    console.log(i);
})

我尝试了几种不同的方法来让滑块工作，将功能放在按钮内，尝试拉动索引然后递增。最好的方法是什么？

标签： javascriptarrays