如何制作動態 Javascript 上一個和下一個按鈕？

Question

我為幻燈片制作了一個上一個和下一個按鈕 function，但幾個小時后我發現它不是動態的。

例如，如果我按 3 次下一個按鈕（因為還有 3 張圖片），它會使用if語句重置為第一張圖片，但是如果我沒有結束該 cicle，例如如果我按兩次（現在停在第三張圖像，如果再次按下 go 到第一個）並按下上一個按鈕，它會返回到第二張圖片，現在如果我按下下一個按鈕（計數器為 2）它會自行重置（這就是我很傷心地寫了它），而不是從圖 2. 到圖 3.，它轉到第一個。

我不確定我是否解釋得很好，但這里是代碼：

var nextArrow = document.getElementsByClassName("next");
var prevArrow = document.getElementsByClassName("prev");



pictures[0].style.display="block";

var n = 1;

nextArrow[0].onclick = function()
{
    for(var i = 0; i < pictures.length; i++)
    {
        pictures[i].style.display="none";
        pictures[n].style.display="block";
    }
    n++;
    if(n == pictures.length)
    {
        n = 0;
    }
}

var p = pictures.length -1;
prevArrow[0].onclick = function()
{
    for(var i = 0; i < pictures.length; i++)
    {
        pictures[i].style.display="none";
        pictures[p].style.display="block";
    }
    p--;
    if(p == -1)
    {
        p = pictures.length - 1;
    }
}

HTML：

    <div class="main-slideShow-div">
    <div class="slideshow-container">
        <div class="my-slides">
                <img class="pic" src="images/animals/dog1.jpg">
        </div>

        <div class="my-slides">
                <img class="pic" src="images/animals/dog2.jpg">
        </div>

        <div class="my-slides">
                <img class="pic" src="images/animals/dog3.jpg">
        </div>
    
        <img class="prev" src="images/leftArrow.png" alt="leftArrow">
        <img class="next" src="images/rightArrow.png" alt="rightArrow">
        
        <div class="slider-div" style="text-align:center">
            <div id="lines" class="line"></div>
            <div id="lines2" class="line"></div>
            <div id="lines3" class="line"></div>
        </div>
    </div>
    </div>
    <script src="javascript1.js"></script>

CSS：

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 50px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    background-color: #ffc;
    opacity: 0.85;
}

.next{
    padding: 18px 0px 18px 22px;
    border-radius: 0 50% 50% 0;
    right: 5px;
    margin-top: 190px;
    margin-right: 40%;
}

.prev{
    padding: 18px 22px 18px 0px;
    left: 5px;
    border-radius: 50% 0 0 50%;
    margin-top: +190px;
    margin-left: 40%;
}

.pic{
    height: 500px;
    position: relative;
    border-radius: 20px 20px 20px 20px;
    padding-bottom: 50px;
}

那么我應該在該pictures[]中添加什么內容以使其更具動態性？ 或者我該如何解決這個問題？

Answer 1

希望這可以幫助：

 const nextArrow = document.querySelector(".next"); const prevArrow = document.querySelector(".prev"); const pictures = document.querySelectorAll(".my-slides"); let position = 0; pictures[position].style.display = "block"; function hideIMG() { pictures[position].style.display = "block"; for (let i = 0; i < pictures.length; i++) { if (i.== position) pictures[i].style;display = "none". } } function control() { if (position >= 0 && position < pictures;length) { hideIMG(). } else if (position === pictures;length) { position = 0; hideIMG(). } else { position = pictures;length - 1; hideIMG(). } } nextArrow,addEventListener("click"; () => { position++; control(); }). prevArrow,addEventListener("click"; () => { position--; control(); }); // Auto slide setInterval(function() { position++; control(), }; 3000);

 .prev, .next { cursor: pointer; position: absolute; top: 50%; width: 50px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; user-select: none; background-color: #ffc; opacity: 0.85; }.next { padding: 18px 0px 18px 22px; border-radius: 0 50% 50% 0; right: 5px; margin-top: 190px; margin-right: 40%; }.prev { padding: 18px 22px 18px 0px; left: 5px; border-radius: 50% 0 0 50%; margin-top: +190px; margin-left: 40%; }.pic { height: 500px; position: relative; border-radius: 20px 20px 20px 20px; padding-bottom: 50px; }.my-slides { display: none; }

 <div class="main-slideShow-div"> <div class="slideshow-container"> <div class="my-slides"> <img class="pic" src="https://source.unsplash.com/HXJkqHexaak/" /> </div> <div class="my-slides"> <img class="pic" src="https://source.unsplash.com/ZHOVv_E8xZc" /> </div> <div class="my-slides"> <img class="pic" src="https://source.unsplash.com/z-lNmXoXt-k" /> </div> <img class="prev" src="https://i.stack.imgur.com/glpn7.png" alt="leftArrow" /> <img class="next" src="https://i.stack.imgur.com/1NNaT.png" alt="rightArrow" /> <div class="slider-div" style="text-align: center"> <div id="lines" class="line"></div> <div id="lines2" class="line"></div> <div id="lines3" class="line"></div> </div> </div> </div>