イメージギャラリーに矢印を追加する - JS

Question

JavaScriptとStackoverflowが新しくなったので、画像ギャラリーにクリック可能なボタンを追加しようとしています。

JavaScriptの次の段階では少し失われていますが、画像をどのように循環させるかについてのヒントは素晴らしいでしょう。

乾杯

https://jsfiddle.net/KrnRbts/zkvu16nv/

HTML：

"use strict"; 
(function() { 
var thumbnails = document.querySelectorAll('.gallery__img'), 
    imageMain = document.querySelector('.image-main'); 
var leftArrow = document.querySelector('.material-icons left-btn'), 
    rightArrow = document.querySelector('.material-icons right-btn'); 
var currentIndex = 0; 

for (var i = 0; i < thumbnails.length; i++) { 
    thumbnails[i].addEventListener('click', function(evt) { 
    imageMain.src = evt.target.src.replace('150/100', '1000/400'); 
}); 
} 

function arrows() { 
thumbnails.click(); 
} 

function moveLeft(leftArrow){ 
for (var j = 0; j < currentIndex.length; j--){ 
currentIndex--; 
} 
} 

function moveRight(rightArrow){ 
for (var j = 1; j < currentIndex.length; j++){ 
currentIndex++; 
} 
} 

})(); 

JS：ここ

<div class="gallery__wrapper"> 
<div class="image-main__wrapper"> 
<img class="image-main" src="https://unsplash.it/g/1000/400?image=0"> 
    <div id="arrows"> 
     <i class='material-icons left-btn'>chevron_left</i> 
     <i class='material-icons right-btn'>chevron_right</i> 
    </div> 
    <div class="image-thumbnails__wrapper"> 
     <ul class="thumbnails"> 
     <li><img id="thumb-1" class="gallery__img" src="https://unsplash.it/g/150/100?image=1"></li> 
     <li><img id="thumb-2" class="gallery__img" src="https://unsplash.it/g/150/100?image=2"></li> 
     <li><img id="thumb-3" class="gallery__img" src="https://unsplash.it/g/150/100?image=3"></li> 
     <li><img id="thumb-4" class="gallery__img" src="https://unsplash.it/g/150/100?image=4"></li> 
     <li><img id="thumb-5" class="gallery__img" src="https://unsplash.it/g/150/100?image=5"></li> 
     <li><img id="thumb-6" class="gallery__img" src="https://unsplash.it/g/150/100?image=6"></li> 
     <li><img id="thumb-7" class="gallery__img" src="https://unsplash.it/g/150/100?image=7"></li> 
     <li><img id="thumb-8" class="gallery__img" src="https://unsplash.it/g/150/100?image=8"></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 1

溶液でフィドル：https://jsfiddle.net/99x4a1da/

"use strict"; 
(function() { 
    var thumbnails = document.querySelectorAll('.gallery__img'), //target thumbnail images, 
     imageMain = document.querySelector('.image-main'); //target main image 
    var leftArrow = document.querySelector('.material-icons.left-btn'), 
     rightArrow = document.querySelector('.material-icons.right-btn'); 
    var currentIndex = 0; 

    for (var i = 0; i < thumbnails.length; i++) { 
     thumbnails[i].addEventListener('click', function(evt) { 
     imageMain.src = evt.target.src.replace('150/100', '1000/400'); 
     currentIndex = evt.target.id.substr(6, evt.target.id.length) - 1; 
    }); 
    } 
    leftArrow.addEventListener('click', function(evt) { 
    if (currentIndex > 0) { 
     currentIndex--; 
     imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400'); 
    } 
    }); 

    rightArrow.addEventListener('click', function(evt) { 
    if (currentIndex < thumbnails.length -1) { 
      currentIndex++; 
      imageMain.src = thumbnails[currentIndex].src.replace('150/100', '1000/400'); 
     } 
    }); 


})(); 

説明2つの矢印ボタンにクリックリスナーを追加しました。ページの最初の読み込み時には、インデックスは0になります。したがって、矢印クリックまたはサムネイルクリックであっても、インデックスを追跡するだけで済みます。 もちろん、前または次へ進むことが許可されているかどうか、またはすでに最後の要素になっているかどうかを確認する必要があります。 現在のインデックスを更新するためにクリックされたサムネイルを検出するには、さまざまな方法があります。ここでは<img>タグのIDが使用されています。

質問がある場合は教えてください。