Javascript 在数组对象中移动 .active 类

Javascript Move .active class within array objects

本文关键字：移动 active 对象 数组 Javascript      更新时间：2023-09-26

如果我有一个包含四个图像的div

<div id='imgs' class='sectionImage'>
    <img id='imgj1' imgn='1' class='carouselImage carouselActive' src='img/image1.jpg'/>
    <img id='imgj2' imgn='2' class='carouselImage' src='img/image2.jpg'/>
    <img id='imgj3' imgn='3' class='carouselImage' src='img/image3.jpg'/>
    <img  id='imgj4' imgn='4'class='carouselImage' src='img/image4.jpg'/>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

我将如何设置一个数组和函数，通过将活动类移动到下一个图像并保持循环来滚动数组中的四个图像？请只做Javascript...无库

定义两个函数：一个用于转到下一个，另一个用于转到上一个：

    function gotoNext() {
        var active = document.querySelector(".carouselImage.carouselActive");  //select active image
        if (active == null) { //if no active image select the first
            document.querySelector(".carouselImage[imgn='1']").className += " carouselActive";
        } else {
            active.className = "carouselImage";
            var curId = active.getAttribute("imgn"); //imgn of selected image
            var next = document.querySelector(".carouselImage[imgn='" + (++curId) + "']"); //next image. if there is no next image select the first
            if (next == null) document.querySelector(".carouselImage[imgn='1']").className += " carouselActive";
            else next.className += " carouselActive";
        }
    }
function gotoPrev() {
    var active = document.querySelector(".carouselImage.carouselActive");  //select active image
    if (active == null) { //if no active image select the first
        document.querySelector(".carouselImage[imgn='1']").className += " carouselActive";
    } else {
        active.className = "carouselImage";
        var curId = active.getAttribute("imgn"); //imgn of selected image
        var prev = document.querySelector(".carouselImage[imgn='" + (--curId) + "']"); //prev image. if there is no prev image select the last
        if (prev == null) document.querySelector(".carouselImage[imgn='4']").className += " carouselActive";
        else prev.className += " carouselActive";
    }
}

注意：最好替换类名 = ...具有可以删除或添加类的函数。例如，jquery 有 removeClass（"className"） 和 addClass（"className"）。还有jquery的实现。

相关文章：