无法将自动“下一张幻灯片”添加到我的图像幻灯片中

时间：2020-10-26 10:06:40

标签： javascript slideshow

我无法添加自动功能来显示幻灯片中的下一张图像。我尝试过使用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)";
    }
});

Update1 CSS 

*{
    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>

忽略此 看起来您的帖子大部分是代码；请添加更多详细信息。看来您的帖子大部分是代码；请添加更多详细信息。看来您的帖子大部分是代码；请添加更多详细信息。看来您的帖子大部分是代码；请添加更多详细信息。

1 个答案:

答案 0 :(得分：0)

手册和所需的幻灯片自动控制有一个共同点：两者都做同样的事情！因此，让我们创建一个可以手动和自动调用的函数，而不是向按钮的click事件监听器添加匿名函数。在“自动模式”下，我宁愿使用setTimeout而不是setInterval。这样，如果用户按下其中一个导航按钮，该功能将定期再次调用自身并将计时器重置为所需的时间间隔。

您的代码只有一个问题：

const size = pizzaImages[0].clientWidth;

此行为 size 提供<img>中第一个<div>元素的宽度值-这也可能意味着它可能为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>

相关问题
最新问题