將箭頭添加到圖片庫-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'); 
     } 
    }); 


})(); 

說明：您將一個點擊監聽器添加到兩個箭頭按鈕。在頁面的第一次加載時，索引將爲0.因此，只需要跟蹤索引，無論是單擊箭頭還是縮略圖。 當然，您需要檢查是否允許前一個或下一個或者如果您已經在最後一個元素。 爲了檢測哪個縮略圖已經被點擊來更新當前索引 - 不同的方法將是可能的。這裏使用<img>標籤的標識。

如果您有任何問題，請告訴我。