Question

这是我的代码，单击下一个/上一个箭头时，我能够重置计时器，但是当我使用点指示器时，它不会在新幻灯片中显示。我无论如何都不是js专业人士，但我想解决这个问题。

谢谢您的帮助！

var slideIndex = 0;
showSlides();
var slides,dots;

function plusSlides(position) {
    slideIndex += position;
    if (slideIndex > slides.length) {slideIndex = 1}
    else if(slideIndex < 1){slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
        slides[slideIndex-1].style.display = "flex";
        dots[slideIndex-1].className += " active";
        clearTimeout(timer);
        timer = setTimeout(showSlides,3000);
    }

function currentSlide(index) {
    if (index > slides.length) {index = 1}
    else if(index < 1){index = slides.length}
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
        slides[index-1].style.display = "flex";
        dots[index-1].className += " active";
        clearTimeout(timer);
        timer = setTimeout(showSlides,3000);
    }

var timer;
function showSlides() {
    var i;
    slides = document.getElementsByClassName("mySlides");
    dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "flex";
    dots[slideIndex-1].className += " active";
    timer = setTimeout(showSlides, 3000); // Change image every 3 seconds
}

body {
  margin: 0;
  padding: 0;
}
.mySlides {
  width: 100%;
  height: 100vh;
  background-color: grey;
  justify-content: center;
  align-items: center;
}

.slideshow-container .mySlides:nth-child(2) {
  background-color: red;
}

.slideshow-container .mySlides:nth-child(3) {
  background-color: blue;
}

.slideshow-container .mySlides:nth-child(4) {
  background-color: green;
}

.mySlides p {
  color: white;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 200%;
}

.mySlides {
  display:none
}


.next, .prev {
  position: absolute;
  top: calc(50vh - 20px);
  color: white;
  font-size: 40px;
    cursor:pointer
}

.next {
  right: 10px;
}

.prev {
  left: 10px;
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
  position: relative;
  bottom: 50px;
}
.active, .dot:hover {
	background-color: #717171;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 2s;
	animation-name: fade;
	animation-duration: 2s;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
 
  </head>
  <body>


<div id="slide">
  <div class="slideshow-container">
    <div class="mySlides fade"> <p>One</p> </div>
    <div class="mySlides fade"> <p>Two</p> </div>
    <div class="mySlides fade"> <p>Three</p> </div>
    <div class="mySlides fade"> <p>Four</p> </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div>
  <br>
  <div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
  </div>



   
  </body>
</html>

再次感谢您的时间！

使用点指示器在JS Silder中重置计时器

0 个答案: