我无法添加自动功能来显示幻灯片中的下一个图像。我尝试过在这个论坛上使用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)";
}
});
更新1CSS
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.pizza-container{
width: 60%;
margin: auto;
border: 5px solid black;
overflow: hidden;
position: relative;
}
.pizza-slide {
display: flex;
width: 100%;
height: 500px;
}
#prevBtn, #nextBtn {
position: absolute;
height: 40px;
width: 40px;
top: 50%;
z-index: 10;
font-size: 20px;
color: #ffffff;
opacity: 0.8;
cursor: pointer;
background-color: #444444;
border-radius: 50%;
margin-top: -20px;
text-align: center;
line-height: 40px;
}
#prevBtn{
left: 5%;
}
#nextBtn{
right: 5%;
}
#prevBtn:hover, #nextBtn:hover{
box-shadow: 0px 0px 10px black;
background-color: #29a8e2;
}
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>
忽略这个看起来你的帖子大部分都是代码；请添加更多详细信息。看起来你的帖子大部分都是代码；请添加更多详细信息。看起来你的帖子大部分都是代码；请添加更多详细信息。看起来你的帖子大部分都是代码；请添加更多详细信息。
手动和您想要的幻灯片自动控制有一个共同点：两者都做同样的事情！因此，与其向按钮的点击事件监听器添加匿名函数，不如创建一个可以手动和自动调用的函数。在"自动模式"下，我宁愿使用setTimeout而不是setInterval。通过这种方式，如果用户按下其中一个导航按钮，该功能会定期再次调用自己，并将计时器重置为所需的间隔。
你的代码还有一个问题：
const size = pizzaImages[0].clientWidth;
这一行给出了size<div>中第一个<img>元素的宽度的值，这也意味着它可能是0，因为图像可能还没有加载。因此，让我们确保它完成加载，然后用正确的大小填充大小。此外，这将是开始自动播放幻灯片的最佳时机。
pizzaImages[0].addEventListener("load", function(e) {
size = e.target.clientWidth;
timer = setTimeout(nextPressed, 1500);
});
以下是完整的工作示例(只需点击"运行代码片段"(：
const pizzaSlide = document.querySelector(".pizza-slide");
const pizzaImages = document.querySelectorAll(".pizza-slide img");
const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");
let counter = 0;
let size;
let timer;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
function nextPressed() {
if (counter >= pizzaImages.length - 1) return;
clearTimeout(timer);
timer = setTimeout(nextPressed, 1500);
pizzaSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
function prevPressed() {
if (counter <= 0) return;
clearTimeout(timer);
timer = setTimeout(prevPressed, 1500);
pizzaSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
nextBtn.addEventListener("click", nextPressed);
prevBtn.addEventListener("click", prevPressed);
pizzaSlide.addEventListener("transitionend", () => {
if (pizzaImages[counter].id === "lastClone") {
pizzaSlide.style.transition = "none";
counter = pizzaImages.length - 2;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
if (pizzaImages[counter].id === "firstClone") {
pizzaSlide.style.transition = "none";
counter = 1;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
});
pizzaImages[0].addEventListener("load", function(e) {
size = e.target.clientWidth;
timer = setTimeout(nextPressed, 1500);
});* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.pizza-container {
width: 60%;
margin: auto;
border: 5px solid black;
overflow: hidden;
position: relative;
}
.pizza-slide {
display: flex;
width: 100%;
height: 500px;
}
#prevBtn,
#nextBtn {
position: absolute;
height: 40px;
width: 40px;
top: 50%;
z-index: 10;
font-size: 20px;
color: #ffffff;
opacity: 0.8;
cursor: pointer;
background-color: #444444;
border-radius: 50%;
margin-top: -20px;
text-align: center;
line-height: 40px;
}
#prevBtn {
left: 5%;
}
#nextBtn {
right: 5%;
}
#prevBtn:hover,
#nextBtn:hover {
box-shadow: 0px 0px 10px black;
background-color: #29a8e2;
}<div class="pizza-container">
<!-- slider controls -->
<div id="prevBtn">
<</div>
<div id="nextBtn">></div>
<!-- slider controls -->
<div class="pizza-slide">
<img src="https://picsum.photos/id/1/200/300" id="lastClone" alt="">
<img src="https://picsum.photos/id/2/200/300" alt="">
<img src="https://picsum.photos/id/3/200/300" alt="">
<img src="https://picsum.photos/id/1/200/300" alt="">
<img src="https://picsum.photos/id/2/200/300" id="firstClone" alt="">
<!-- to get a smooth infinite loop we need to clone the last and first image-->
</div>
</div>