Question

我必须制作一个必须同时使用自动和手动的幻灯片。

对于手动部分，我有两个按钮：next和previous，可以让我看到照片而无需在图像之间等待一段时间。

当我没有点击按钮时，幻灯片显示会自动进行，并且图像会在六秒后发生变化（例如）。

我的问题是，在我点击上一个/下一个按钮后，图像开始出现得更快，或者它们在屏幕上显示的不止一个。

以下是我正在使用的代码：

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("hidden");

  if (n===undefined){n= ++slideIndex;}
  if (n > slides.length) {slideIndex = 1;}
  if (n < 1) {slideIndex = slides.length}

  $(slides[slideIndex-1]).fadeIn(2000);
  slides[slideIndex-1].style.display = "block";
  $(slides[slideIndex-1]).delay(3000);
  $(slides[slideIndex-1]).fadeOut(1000);

  setTimeout(showSlides, 6000);
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>jQuery</title>
  <link rel="stylesheet" href="lab5.css" media="screen" title="no title">
</head>
<body>
  <h1 class="titlu">Goodies</h1>
  <div align="center">
    <button class="button" onclick="plusSlides(-1)" >Previous</button>
    <button class="button" onclick="plusSlides(1)" >Next</button>
  </div>
  <div class="hidden">
    <h4 class="num" > 1 / 5 </h4>
    <img src="http://placehold.it/150x150?text=1">
  </div>
  <div class="hidden">
    <h4 class="num"> 2 / 5 </h4>
    <img src="http://placehold.it/150x150?text=2">
  </div>
  <div class="hidden">
    <h4 class="num"> 3 / 5 </h4>
    <img src="http://placehold.it/150x150?text=3">
  </div>
  <div class="hidden">
    <h4 class="num"> 4 / 5 </h4>
    <img src="http://placehold.it/150x150?text=4">
  </div>
  <div class="hidden">
    <h4 class="num"> 5 / 5 </h4>
    <img src="http://placehold.it/150x150?text=5">
  </div>
</body>
</html>

有没有一种方法可以让幻灯片显示返回到我点击上一个/下一个后每隔六秒显示图像的“速度”？

另外，如何防止它一次显示多个图像？

Answer 1

正在发生的事情是你导致多个计时器启动，这会导致你的回调函数运行得比它应该更频繁。

您需要确保捕获从计时器返回的整数：

var timer = null; // Do this in a scope that is accessible to all your relevant functions

...然后：

timer = setTimeout(showSlides, 6000);

这样您就可以在适当的时候取消计时器：

clearTimeout(timer);

您需要在单击按钮时清除计时器，这将停止自动计时器运行，然后您可以启动一个新计时器，只剩下一个正在运行的计时器。

Answer 2

这是使用Scott建议的计时器的自动和手动幻灯片的工作代码。它与html和css一起使用，问题是如何根据他的代码提出的。 https://www.w3schools.com/howto/howto_js_slideshow.asp

var slideIndex = 1;
var timer = null;
showSlides(slideIndex);

function plusSlides(n) {
  clearTimeout(timer);
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  clearTimeout(timer);
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n==undefined){n = ++slideIndex}
  if (n > slides.length) {slideIndex = 1}
  if (n < 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 = "block";
  dots[slideIndex-1].className += " active";
  timer = setTimeout(showSlides, 5000);
}

Answer 3

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="img_snowtops.jpg" style="width:100%">
  <img class="mySlides" src="img_lights.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="img_forest.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

**SCRIPT CODES**
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

</body>
</html>


**//CSS CODES**
/* Slideshow container */
.slideshow-container {
  height:500px;
  position: relative;
  margin: auto;
  with:800px;
}

/* Hide the images by default */
.mySlides {
    display: none;
}


/* Next & previous buttons */
.prev, .next {
    background-color:gold;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 20px;
  color: black;
  font-weight: bold;
  font-size: 24px;
  transition: 0.6s ease;
  border-radius: 7 7px 7px 7;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color:white;
}

/* Caption text */
.text {
  color:lime;
  font-size: 22px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color:lime;
  font-size: 22px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #000000;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.active, .dot:hover {
  background-color: #ff0101;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.2s;
  animation-name: fade;
  animation-duration: 6.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}

自动和手动幻灯片

3 个答案: