Onclick/offclick？ JSタイマー？どのように各作業を繰り返し行うか

Question

私はJSに新しいので、私はこのイメージスライダを私の利点に働かせようとしています。私は、各サムネイルをクリック可能にして、より大きな画像スライドを所定の場所に配置したい。私はCSSホバー効果でこの作業を行うことができましたが、代わりにクリックして作業する必要があります。私はそれが働いているが、あなたは一度それをクリックすることができます。イメージは元の状態に戻りませんどのように私はこれを修正するのですか？ 1秒後に復帰するようにタイマー設定がありますか？別の親指をクリックすると自動的にリセットされますか？位置をリセットするには

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

、我々は.big2イメージのため、個々のトップの位置を変更することはありません。代わりに、選択したイメージに適用する新しいクラスを作成できます。

CSS：

.selected { 
    top: 100px; 
} 

たび我々は親指をクリックしてください。 .big2画像からこのクラスを追加または削除して上下に移動します。クリックした親指に対応する画像に追加します。

のjavascript：

我々は.thumbクラスですべての要素をつかみ、親指と呼ばれる配列に格納、我々は.big2と同じことを行うと切り札に格納します。

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

現在と同じ順番、例えば2つのリストを持っている：親指[thumb0、thumb1、thumb2]、切り札[big0、BIG1、BIG2]。いくつかのクリックイベントを親指に追加できます。サムリストをループします。リスト内のすべてのアイテムについて、クリックイベントリスナーを追加します。 このリスナー関数の内部では、関数bigintsのすべての項目から.selectedクラスを削除する関数returnAll（）を実行します。次に、選択したクラスを、クリックした親指のリストの同じ位置にある大きなクラスに追加します。私は明確にするため、独自のの「ファイル」に、すべてのjavascriptを移動 https://jsfiddle.net/t7r17r92/3/

注意：ここで

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"); 
    } 
} 

は、上記のコードで更新、あなたのフィドルです。

幸運を祈る！