Onclick/Offclick? JS Timer? Wie man jeden wiederholt arbeiten lassen kann

Question

Ich bin neu in JS und benutze damit ich versuche, diesen Bild-Slider zu meinem Vorteil arbeiten zu lassen. Ich möchte, dass jedes Miniaturbild anklickbar ist, damit das größere Bild an seinen Platz rutscht. Ich konnte dies mit einem CSS-Hover-Effekt machen, aber ich brauche es stattdessen auf Klick. Ich habe es funktioniert, aber Sie können es nur einmal klicken. Die Bilder werden nicht in ihren ursprünglichen Zustand zurückversetzt. Wie kann ich das beheben? Gibt es eine Timereinstellung, die nach 1 Sekunde zurückgesetzt wird? oder es wird automatisch zurückgesetzt, wenn Sie auf einen anderen Daumen klicken?

https://jsfiddle.net/Lumberjack225/t7r17r92/

HTML

<script> 
function myFunction() { 
document.getElementById("demo").style.top = "100px"; 
} 
function myFunction2() { 
document.getElementById("demo2").style.top = "100px"; 
} 
function myFunction3() { 
document.getElementById("demo3").style.top = "100px"; 
} 
</script> 

<!-- Mobile Slider --> 
<div class="mobileslider"> 
<div class="innermobile"> 
<div class="container3"> 
<span onclick="myFunction()" href="#"> 
    <img class="thumb" src="https://images.unsplash.com/photo-1460899960812-f6ee1ecaf117?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px"> 
    <img id="demo" class="big2" src="https://images.unsplash.com/photo-1460899960812-f6ee1ecaf117?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px"> 
</span> 

<span onclick="myFunction2()" href="#"> 
    <img class="thumb" src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px"> 
    <img id="demo2" class="big2" src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px"> 
</span> 

<span onclick="myFunction3()" href="#"> 
    <img class="thumb" src="https://images.unsplash.com/photo-1453230806017-56d81464b6c5?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px"> 
    <img id="demo3" class="big2" src="https://images.unsplash.com/photo-1453230806017-56d81464b6c5?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px"> 
</span> 
<a href="#"> 
    <center> <img class="big2 featuredm" src="https://images.unsplash.com/photo-1456318019777-ccdc4d5b2396?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px"></center> 
</a> 
</div> 
</div> 
</div> 

CSS

.container3 { 
position: relative; 
height: 297px; 
width: 95%; 
overflow: hidden; 
margin-right: auto; 
margin-left: auto; 
margin-bottom: 0; 
} 

.container3 a { 
float: left; 
margin-top: 9px; 
margin-right: 9px; 
margin-left: 9px; 
margin-bottom: 9px; 
} 

.container3 span { 
float: left; 
margin-top: 9px; 
margin-right: 9px; 
margin-left: 9px; 
margin-bottom: 9px; 
} 
.container2 { 
position: relative; 
height: 660px; 
width: 960px; 
overflow: hidden; 
margin: 0 auto; 
} 

.container2 a { 
float: left; 
margin: 20px; 
} 

.big { 
position: absolute; 
top: 260px; 
left: 20px; 
} 

.big2 { 
position: absolute; 
top: 100px; 
left: 0px; 
} 
.big { 
position: absolute; 
top: 900px; 
left: 20px; 

-webkit-transition: top .5s ease; 
-moz-transition: top .5s ease; 
-o-transition: top .5s ease; 
-ms-transition: top .5s ease; 
transition: top .5s ease; 
} 
.big2 { 
position: absolute; 
top: 900px; 
-webkit-transition: top .5s ease; 
-moz-transition: top .5s ease; 
-o-transition: top .5s ease; 
-ms-transition: top .5s ease; 
transition: top .5s ease; 
margin-left: auto; 
margin-right: auto; 
} 

.featured { 
top: 260px; 
left: 20px; 
z-index: -3; 
} 

.featuredm { 
top: 100px; 
left: 0px; 
z-index: -3; 
} 

a:hover .thumb { 
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
} 

a:hover .big { 
top: 260px; 
} 

span:hover .thumb { 
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
} 

.featured2 { 
top: 260px; 
left: 20px; 
z-index: -3; 
} 

Answer 1

die Position zurückzustellen, die einzelnen Top-Position für die .big2 Bilder ändern wir nie. Erstellen Sie stattdessen eine neue Klasse, die wir auf das ausgewählte Bild anwenden.

css:

.selected { 
    top: 100px; 
} 

Jedes Mal, wenn wir einen Daumen klicken. Wir werden diese Klasse aus den .big2-Bildern hinzufügen oder entfernen, um sie nach oben oder unten zu verschieben. Dann fügen wir es dem Bild hinzu, das dem angeklickten Daumen entspricht.

javascript:

Wir greifen alle Elemente mit der .thumb Klasse und speichert sie in einem Array namens Daumen, tun wir das gleiche mit dem .big2 und speichern sie in bigs.

var thumbs = document.querySelectorAll('.thumb'); 
var bigs = document.querySelectorAll('.big2'); 

Wir haben jetzt zwei Listen mit der gleichen Reihenfolge, zB: Daumen [thumb0, thumb1, thumb2], BIGS [big0, big1, big2]. Lässt einige Klickereignisse zu unseren Thumbs hinzufügen. Wir durchlaufen die Liste der Daumen. Für jedes Element in der Liste fügen wir einen Klickereignis-Listener hinzu. Innerhalb dieser Listener-Funktion führen wir unsere Funktion returnAll() aus, die die Klasse .selected aus allen Elementen der großen Liste entfernt. Wir fügen dann die ausgewählte Klasse zu der großen Position an der gleichen Position in der Liste hinzu wie der Daumen, auf den wir gerade geklickt haben.

for (i = 0; i < thumbs.length; i++) { 
    (function(i) { 
     thumbs[i].addEventListener('click', function() { 
      returnAll(); 
      bigs[i].classList.add("selected") 
     }); 
})(i); 
} 

function returnAll(){ 
    for (i = 0; i < bigs.length; i++) { 
     bigs[i].classList.remove("selected"); 
    } 
} 

Hier ist Ihre Geige, mit dem obigen Code aktualisiert: https://jsfiddle.net/t7r17r92/3/

Beachten Sie, dass ich alle Javascript in eine „Datei“ der eigenen, für Klarheit bewegt.

Viel Glück!