Wie automatisiere ich diesen Slider?

Question

Ich habe diesen Schieberegler und ich möchte den Prozess automatisieren. Ich habe den folgenden Code verwendet. Ich habe einen Weg gefunden, es zu automatisieren, aber dann hat es die Tasten deaktiviert. Könntest du mir helfen? Außerdem würde ich gerne wissen, wie man den Schieberegler anhält, wenn jemand darüber schwebt.

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

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

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

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    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"; 
 
}

* {box-sizing:border-box} 
 
body {font-family: raleway,sans-serif;margin:0} 
 
.mySlides {display:none} 
 

 
/* Slideshow container */ 
 
.slideshow-container { 
 
    max-width: 1000px; 
 
    position: relative; 
 
    margin: auto; 
 
} 
 

 
/* Next & previous buttons */ 
 
.prev, .next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 45%; 
 
    width: auto; 
 
    padding: 16px; 
 
    margin-top: -22px; 
 
    color: firebrick; 
 
    font-weight: bold; 
 
    font-size: 24px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 

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

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

 
.prev:active, .next:active { 
 
    color:white; 
 
    background-color: rgba(178,34,34,0.8); 
 
} 
 

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

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

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

 
.active { 
 
    background-color: darkred; 
 
} 
 

 
.dot:hover{ background-color: firebrick;} 
 

 

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

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

 
@keyframes fade { 
 
    from {opacity: .4} 
 
    to {opacity: 1} 
 
} 
 
.boingInUp { 
 
    animation-name: boingInUp; 
 
} 
 
@keyframes boingInUp { 
 
    0% { 
 
    opacity: 0; 
 
    transform-origin: 50% 0%; 
 
    transform: perspective(800px) rotateX(-90deg); 
 
    } 
 
    
 
    50% { 
 
    opacity: 1; 
 
    transform-origin: 50% 0%; 
 
    transform: perspective(800px) rotateX(50deg); 
 
    } 
 

 
    100% { 
 
    opacity: 1; 
 
    transform-origin: 50% 0%; 
 
    transform: perspective(800px) rotateX(0deg); 
 
    } 
 
} 
 
.puffIn { 
 
    animation-name: puffIn; 
 
} 
 
@keyframes puffIn { 
 
    0% { 
 
    opacity: 0; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(2,2); 
 
    filter: blur(2px); 
 
    } 
 

 
    100% { 
 
    opacity: 1; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(1,1); 
 
    filter: blur(0px); 
 
    } 
 
} 
 
.vanishIn { 
 
    animation-name: vanishIn; 
 
} 
 
@keyframes vanishIn { 
 
    0% { 
 
    opacity: 0; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(2, 2); 
 
    filter: blur(90px); 
 
    } 
 

 
    100% { 
 
    opacity: 1; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(1, 1); 
 
    filter: blur(0px); 
 
    } 
 
} 
 
/* On smaller screens, decrease text size */ 
 
@media only screen and (max-width: 300px) { 
 
    .prev, .next,.text {font-size: 11px} 
 
}

<!DOCTYPE html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
<body> 
 

 
<div class="slideshow-container"> 
 

 
<div class="mySlides vanishIn fade"> 
 
    <img src="http://www.w3schools.com/w3css/img_forest.jpg" style="width:100%"> 
 
</div> 
 

 
<div class="mySlides vanishIn fade"> 
 
    <img src="http://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%"> 
 
</div> 
 

 
<div class="mySlides vanishIn fade"> 
 
    <img src="http://www.w3schools.com/w3css/img_fjords.jpg" style="width:100%"> 
 
</div> 
 

 
<a class="prev" onclick="plusSlides(-1)">❮</a> 
 
<a class="next" onclick="plusSlides(1)">❯</a> 
 

 
</div> 
 
<br> 
 

 
<div style="text-align:center;transform:translateY(-60px);"> 
 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
</div> 
 

 
</body> 
 
</html>

Bitte helfen Sie mir, weil ich bei Javascript kein Profi bin. Ich habe ein paar Tipps, aber ich kann es nicht funktionieren.

Answer 1

die "window.setInterval" -Funktion füge ich zu Ihrem Javascript hinzugefügt, es funktioniert für mich:

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

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

 
window.setInterval(function(){ 
 
    $("a.next").trigger("click"); 
 
}, 5000); 
 

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

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    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"; 
 
}