自动和手动幻灯片
[英] Automatic and manual slideshow
本文介绍了自动和手动幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须制作一个可以自动和手动工作的幻灯片.
对于手动部分，我有两个按钮:下一个和上一个，让我无需在图像之间等待一段时间即可查看照片.
当我不单击按钮时，幻灯片会自动播放，并且图像会在 6 秒后更改(例如).
我的问题是，在我单击上一个/下一个按钮后，图像开始显示得更快，或者它们在屏幕上出现不止一个.
这是我正在使用的代码:
var slideIndex = 1;showSlides(slideIndex);功能 plusSlides(n) {showSlides(slideIndex += n);}功能 showSlides(n) {变量 i;var slides = document.getElementsByClassName("隐藏");if (n===undefined){n= ++slideIndex;}如果(n>slides.length){slideIndex = 1;}if (n <1) {slideIndex = slides.length}$(slides[slideIndex-1]).fadeIn(2000);幻灯片[slideIndex-1].style.display = "block";$(slides[slideIndex-1]).delay(3000);$(slides[slideIndex-1]).fadeOut(1000);setTimeout(showSlides, 6000);}
.hidden {显示:无；}
<头><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"><身体><h1 class="titlu">好东西</h1><div align="center"><button class="button" onclick="plusSlides(-1)" >上一个</button><button class="button" onclick="plusSlides(1)" >下一步</button>
<div class="隐藏"><h4 class="num" >1/5 </h4><img src="http://placehold.it/150x150?text=1">
<div class="隐藏"><h4 class="num">2/5 </h4><img src="http://placehold.it/150x150?text=2">
<div class="隐藏"><h4 class="num">3/5 </h4><img src="http://placehold.it/150x150?text=3">
<div class="隐藏"><h4 class="num">4/5 </h4><img src="http://placehold.it/150x150?text=4">
<div class="隐藏"><h4 class="num">5/5 </h4><img src="http://placehold.it/150x150?text=5">
</html>
在单击上一个/下一个后，有没有办法可以让幻灯片恢复到每六秒显示图像的速度"?
另外，如何防止它一次显示多个图像?
解决方案
发生的情况是您导致多个计时器启动，这导致您的回调函数比应有的运行频率更高.
您需要确保捕获从计时器返回的整数:
var timer = null;//在所有相关函数都可以访问的范围内执行此操作
...然后:
timer = setTimeout(showSlides, 6000);
以便您可以在适当的时候取消计时器:
clearTimeout(timer);
您需要在点击按钮时清除您的计时器，这将停止自动计时器的运行，然后您可以启动一个新计时器，只剩下一个正在运行的计时器.
I have to make a slideshow that has to work both automatic and manual.
For the manual part I have two buttons: next and previous that allows me to see the photos without having to wait a certain period of time between images.
When I don't click on the buttons, the slideshow goes automatic and the images change after six seconds (for example).
My problem is that, after I click on the previous/ next button, the images start to appear faster or they appear more than one on the screen.
Here is the code I am working with:
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>
Is there a way I can make the slideshow return to its "speed" of showing the images every six seconds after I click on previous/next?
Also, how can I prevent it from showing more than one image at a time?
解决方案
What's happening is that you are causing multiple timers to be started, which causes your callback function to run more often than it should.
You need to make sure that you capture the integer that is returned from your timer:
var timer = null; // Do this in a scope that is accessible to all your relevant functions
...then:
timer = setTimeout(showSlides, 6000);
So that you can cancel the timer where appropriate:
clearTimeout(timer);
You will want to clear your timer upon the clicking of the button, which will stop the automatic one from running and then you can start a new one, leaving you with only one running timer.
这篇关于自动和手动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
