如何在頁面加載時觸發Javascript輪播的自動播放？

我有一個簡單的輪播，使用 JavaScript、html 和 CSS 和三個影像。當手動單擊“上一個”和“下一個”按鈕時，輪播將不斷回圈，因此當訪問者到達第三個影像并單擊/點擊“下一個”時，它會回傳到影像 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>

uj5u.com熱心網友回復：

添加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 html css 旋转木马

上一篇：與父DIV的混合模式

下一篇：如何獨立于父級更改CSS邊框的寬度？[復制]