如何在页面加载时触发 Javascript 轮播的自动播放？

Question

我有一个简单的旋转木马，使用 JavaScript、html 和 CSS 三张图片。当手动单击 'prev' 和 'next' 按钮时，轮播将不断循环，因此当访问者到达第三张图片和 clicks/taps 'next' 时，它会返回到图片 1。

如何让这种循环在页面加载时自动发生？

这是codepen.io

上的代码

下面是相同的代码。我用彩色 div 替换了图像：

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
    let i;
    if (document.querySelector(".carousel")) {
        let slideshowPage = document.querySelector(".carousel");
        if (slideshowPage.classList.contains("carousel")) {
            let slides = slideshowPage.querySelectorAll(".mySlides");
            if (n > slides.length) {
            slideIndex = 1
            };
            if (n < 1) {
            slideIndex = slides.length
            };
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        };
        slides[slideIndex-1].style.display = "block";
        }
    }
}

.carousel {
  min-height: 200px;
  background-color: #e6e6e6;
  position: relative;
}
.mySlides {
  display: none;
  height: /*auto;*/ 200px; /* size for this demo only */
  width:  /*auto;*/ 350px; /* size for this demo only */
  padding: 1rem 3.5rem;
  background-color: #0c991f;
  margin: 0 auto;
}
.mySlides.two {
  background-color: #e08a12;
}
.mySlides.three {
  background-color: #135dd6;
}

.slideshow-container {
  position: relative;
  margin: 0 auto;
}
.carousel .prev,
.carousel .next{
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #000000;
  font-weight: bold;
  font-size: 1.25rem;
  transition: 0.6s ease;
  border: none;
  user-select: none;
  left: 0;
}
.carousel .next{
  left: unset;
  right: 0;
  border-radius: 3px 0 0 3px;
}
.carousel .prev:hover,  
.carousel .prev:focus,
.carousel .next:hover,
.carousel .next:focus{
  background-color: rgba(0,0,0,0.4);
  color: #fff;
}
.carousel .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade,
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

<div class="carousel">
  <div class="slideshow-container">
    <div class="mySlides one">This div represents image 1</div>
     <div class="mySlides two">This div represents image 2</div>
      <div class="mySlides three">This div represents image 3</div>
   </div>
  <div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯</div>
 </div>

Answer 1

将 setInterval 添加到脚本中，例如

setInterval(function() {
  plusSlides(1)
}, 2000);

您可以根据需要更改间隔。

修改后的代码段：

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
    let i;
    if (document.querySelector(".carousel")) {
        let slideshowPage = document.querySelector(".carousel");
        if (slideshowPage.classList.contains("carousel")) {
            let slides = slideshowPage.querySelectorAll(".mySlides");
            if (n > slides.length) {
            slideIndex = 1
            };
            if (n < 1) {
            slideIndex = slides.length
            };
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        };
        slides[slideIndex-1].style.display = "block";
        }
    }
}


setInterval(function() {
  plusSlides(1)
}, 2000);

.carousel {
  min-height: 200px;
  background-color: #e6e6e6;
  position: relative;
}
.mySlides {
  display: none;
  height: /*auto;*/ 200px; /* size for this demo only */
  width:  /*auto;*/ 350px; /* size for this demo only */
  padding: 1rem 3.5rem;
  background-color: #0c991f;
  margin: 0 auto;
}
.mySlides.two {
  background-color: #e08a12;
}
.mySlides.three {
  background-color: #135dd6;
}

.slideshow-container {
  position: relative;
  margin: 0 auto;
}
.carousel .prev,
.carousel .next{
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #000000;
  font-weight: bold;
  font-size: 1.25rem;
  transition: 0.6s ease;
  border: none;
  user-select: none;
  left: 0;
}
.carousel .next{
  left: unset;
  right: 0;
  border-radius: 3px 0 0 3px;
}
.carousel .prev:hover,  
.carousel .prev:focus,
.carousel .next:hover,
.carousel .next:focus{
  background-color: rgba(0,0,0,0.4);
  color: #fff;
}
.carousel .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade,
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

<div class="carousel">
  <div class="slideshow-container">
    <div class="mySlides one">This div represents image 1</div>
     <div class="mySlides two">This div represents image 2</div>
      <div class="mySlides three">This div represents image 3</div>
   </div>
  <div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯</div>
 </div>

如何在页面加载时触发 Javascript 轮播的自动播放？

How to trigger autoplay for Javascript carousel on page load?

html

javascript

css

carousel