Javascript 自动和手动幻灯片放映_Javascript_Jquery_Html_Css

Javascript 自动和手动幻灯片放映

javascript jquery html css

Javascript 自动和手动幻灯片放映,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我必须制作一个幻灯片，既可以自动播放，也可以手动播放对于手动部分，我有两个按钮：“下一个”和“上一个”，这两个按钮允许我查看照片，而无需在图像之间等待一定时间当我不点击按钮时，幻灯片会自动播放，图像会在六秒钟后改变（例如）我的问题是，单击“上一步/下一步”按钮后，图像开始显示得更快，或者在屏幕上出现多个图像以下是我正在使用的代码： var slideIndex=1；放映幻灯片（幻灯片索引）；函数加滑块（n）{ 放映幻灯片（幻灯片索引+=n）； } 功能演示幻灯片（n）{ var i

我必须制作一个幻灯片，既可以自动播放，也可以手动播放

对于手动部分，我有两个按钮：“下一个”和“上一个”，这两个按钮允许我查看照片，而无需在图像之间等待一定时间

当我不点击按钮时，幻灯片会自动播放，图像会在六秒钟后改变（例如）

我的问题是，单击“上一步/下一步”按钮后，图像开始显示得更快，或者在屏幕上出现多个图像

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

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“隐藏”）；
如果（n==未定义）{n=++slideIndex；}
如果（n>slides.length）{slideIndex=1；}
如果（n<1）{slideIndex=slides.length}
$（幻灯片[slideIndex-1]）。fadeIn（2000年）；
幻灯片[slideIndex-1].style.display=“block”；
$（幻灯片[slideIndex-1]）。延迟（3000）；
$（幻灯片[slideIndex-1]）。淡出（1000）；
setTimeout（放映幻灯片，6000）；
}

。隐藏{
显示：无；
}


jQuery
好吃的东西
以前的
下一个
1/5
2/5
3/5
4/5
5/5

发生的情况是，您正在导致多个计时器启动，这会导致回调函数运行的频率超过应有的频率。

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

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

…然后：

timer = setTimeout(showSlides, 6000);

因此，您可以在适当的情况下取消计时器：

clearTimeout(timer);

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

以下是斯科特建议的使用计时器进行自动和手动幻灯片放映的工作代码。它与html和css一起工作，发问者根据这些html和css编写代码。

var slideIndex=1；
var定时器=null；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
清除超时（计时器）；
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
清除超时（计时器）；
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n==未定义）{n=++slideIndex}
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i


W3.CSS
.mySlides{display:none；}
手动幻灯片放映
❮
❯
**脚本代码**
var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i

只需一点注释：您可以使用if（！n）{…}
而不是if（n===未定义）{…}
。它更简短，可读性更强。@commercialsequence，我不建议这样做-尤其是在处理数字或任何可能有错误值的类型时（例如，0，，），正如！0===true
@JanS，当然，如果有人想使用if（！n）{…}
构造，他需要了解强制和原语的行为hanks！：）我还必须添加以下内容：`for（I=0；Ivar 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);
} 

<!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}