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.
