Javascript 无法添加自动"；下一张幻灯片“；到我的图像幻灯片_Javascript_Slideshow

Javascript 无法添加自动"；下一张幻灯片“；到我的图像幻灯片

javascript

Javascript 无法添加自动"；下一张幻灯片“；到我的图像幻灯片,javascript,slideshow,Javascript,Slideshow,我无法添加在幻灯片中显示下一幅图像的自动功能。我尝试过在这个论坛上使用setinterval（）找到的不同方法，但没有成功下面是一段JS代码 const pizzaSlide = document.querySelector(".pizza-slide"); const pizzaImages = document.querySelectorAll(".pizza-slide img"); //Selector for all images //B

我无法添加在幻灯片中显示下一幅图像的自动功能。我尝试过在这个论坛上使用setinterval（）找到的不同方法，但没有成功

下面是一段JS代码

const pizzaSlide = document.querySelector(".pizza-slide");
const pizzaImages = document.querySelectorAll(".pizza-slide img");   //Selector for all images

//Buttons
const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");


//Counter - To figure out what image we are on we need a counter.
let counter = 1;    //Starting from the first image
const size = pizzaImages[0].clientWidth;    //Width of the image, so we know how much we need to slide.

pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";    //Moves one picture forward

//Timer
let timer = setInterval(() => pluscounter(1), 1000); - does not work.

//Button Listeners

nextBtn.addEventListener("click",()=>{  //Listens on click - adds transition
    if(counter >= pizzaImages.length -1) return;     //This is to prevent slideshow bugging out if nextBtn is clicked too fast.
    pizzaSlide.style.transition = "transform 0.4s ease-in-out";     // The speed of the transitions.
    counter++; //Adds one to counter
    pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)"; 
    setInterval(nextBtn, 500);
});

prevBtn.addEventListener("click",()=>{ //Listens on click - adds transition
    if (counter <= 0) return;   //This is to prevent slideshow bugging out if prevBtn is clicked too fast.
    pizzaSlide.style.transition = "transform 0.4s ease-in-out";     // The speed of the transitions.
    counter--; //Retracts one from counter
    pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";
});

pizzaSlide.addEventListener("transitionend", ()=>{  //Returns back to original image after the transform finishes - resets the transition if the picture is a "clone".
    if(pizzaImages[counter].id === "lastClone"){
        pizzaSlide.style.transition = "none";   //Translates it back to original picture
        counter = pizzaImages.length -2;
        pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";
    }
    if(pizzaImages[counter].id === "firstClone"){
        pizzaSlide.style.transition = "none";
        counter = pizzaImages.length - counter;    //Translates it back to original picture
        pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";
    }
});

HTML


幻灯片放映

忽略这一点

看起来你的帖子大部分都是代码；请添加更多详细信息。看起来你的帖子主要是代码；请添加更多详细信息。看起来你的帖子主要是代码；请添加更多详细信息。看起来你的帖子主要是代码；请添加更多详细信息。

手册和您想要的幻灯片自动控制有一个共同点：两者都做相同的事情！因此，与其向按钮的单击事件侦听器添加匿名函数，不如创建一个可以手动和自动调用的函数。在“自动模式”中，我宁愿使用

setTimeout

而不是

setInterval

。这样，如果用户按下其中一个导航按钮，该函数会定期再次调用自身，并将计时器重置为所需的时间间隔

您的代码还有一个问题：

const size = pizzaImages[0].clientWidth;

这一行给出了第一个

plusCenter（1）函数位于何处？@Celadon您确实需要提供一个更完整的代码示例。这个片段不足以看到发生了什么。请添加一个工作示例（包括css）。上面的JS不是一个真正的片段，而是所有的JS代码。它的工作完美无瑕地使用按钮，但我希望它也能自动改变图像没有互动。没有足够的字符来显示CSS，但它只用于设置图像所在框的样式以及用于导航的箭头。我想pluscounter（1）与prevBtn.addEventListener下的counter++类似？如果将代码作为片段发布，则可以分别插入html、CSS和javascript的代码。至少我们需要看到html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>slideshow</title>
</head>
<body>
    <div class="pizza-container">
         <!-- slider controls -->
         <div id="prevBtn"><</div>
         <div id="nextBtn">></div>
         <!-- slider controls -->
        <div class="pizza-slide">
            <img src="./img/bilde3.jpg" id="lastClone" alt="">
            <img src="./img/bilde4.jpg" alt="">
            <img src="./img/bilde2.jpg" alt="">
            <img src="./img/bilde3.jpg" alt="">
            <img src="./img/bilde4.jpg"  id="firstClone" alt="">
            <!-- to get a smooth infinite loop we need to clone the last and first image-->
        </div>
      
    </div>
    <script src="slideshow.js"></script>
</body>
</html>

const size = pizzaImages[0].clientWidth;

pizzaImages[0].addEventListener("load", function(e) {
  size = e.target.clientWidth;
  timer = setTimeout(nextPressed, 1500);
});