Slideshow com Javascript

[joaomart 1]

Olá pessoal!

Estou começando a programar em Javascript e recentemente tive dificuldades em criar um slideshow. Andei pesquisando em alguns sites até que achei um no W3Schools, fiz umas adaptações e consegui isto:

 

HTML

<div class="slideshow-container">
	<div class="slide fade" style="background: url('imagem.png');">
			<h2><a href="#">Título</a></h2>
	</div>
  	<div class="slide fade" style="background: url('imagem2.png');">
			<h2><a href="#">Título 2</a></h2>
	</div>
  	<div class="slide fade" style="background: url('imagem3.png');">
			<h2><a href="#">Título 3</a></h2>
	</div>
</div>
	<a class="prev" onclick="plusSlides(-1)"><span class="fa fa-chevron-left"></span></a>
	<a class="next" onclick="plusSlides(1)"><span class="fa fa-chevron-right"></span></a>

 

CSS

.slide{ display: none; height: 200px; }
.slide h2{ font-size: 35px; }
.slideshow-container{ max-width: 300px; height: 200px; background: #000; }
.slideshow-container img{ border-radius: 0; }
.slideshow-container:hover .prev, .slideshow-container:hover .next{ opacity: 1; }
.prev, .next{ opacity: 0; cursor: pointer; position: absolute; top: 50%; width: auto; padding: 20px; margin-top: -50px; color: #eee; font-weight: bold; transition: 0.4s ease; font-size: 40px; }
.prev, .next:hover{ color: #ccc; }
.next{ right: 0; }
.prev:hover, .next:hover{ border: none;}
.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} }

JavaScript

var slideIndex = 0;
showSlides();

function showSlides() {
	var i;
	var slides = document.getElementsByClassName("slide");
	for (i = 0; i < slides.length; i++) {
		slides[i].style.display = "none"; 
	}
	slideIndex++;
	if (slideIndex> slides.length) {slideIndex = 1} 
	slides[slideIndex-1].style.display = "block"; 
	setTimeout(showSlides, 5000);
	}

function plusSlides(n) {
	tSlides(slideIndex += n);
}

function currentSlide(n) {
	tSlides(slideIndex = n);
}

function tSlides(n) {
	var i;
	var slides = document.getElementsByClassName("slide");
	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"; 
}

Então, como faço para ele parar quando eu posicionar o mouse sobre o slideshow? 

Agradeço para quem puder ajudar.

[Eziquiel 96]

Existem várias maneiras de se fazer isto. Esta é uma delas.

 

Primeiro: implemente os eventos "onmouseover" e "onmouseout" na sua div "slideshow-container". Use esta linha.

<div class="slideshow-container" onmouseover="disableSlider()" onmouseout="enableSlider()">

 

Agora seu script ficará assim: (usando sua lógica - com pequenas modificações)

var slideIndex = 0;
var myTimer;
showSlides();

function disableSlider(){
  clearTimeout(myTimer);
}

function enableSlider(){
  slideIndex--;
  showSlides();
}
                                                               
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("slide");
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    myTimer = setTimeout(showSlides, 5000);
}

function plusSlides(n) {
	tSlides(slideIndex += n);
}

function currentSlide(n) {
	tSlides(slideIndex = n);
}

function tSlides(n) {
	var i;
	var slides = document.getElementsByClassName("slide");
	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"; 
}

 

[joaomart 1]

Valeu, Eziquiel!