Question

JavaScript和Stackoverflow的新手，我只想尝试将可点击的按钮添加到图库。

我目前在JavaScript的下一步中有点迷失，关于如何循环浏览图像的任何提示都会很棒。

干杯

HTML：

=Format([YourFieldName],"Percent")

JS：

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

})();

Answer 1

这里有一个解决方案：https://jsfiddle.net/99x4a1da/

li a:hover:after {
  border: 10px solid transparent;
  border-bottom-color: #ff8888; 
}

说明：向两个箭头按钮添加单击侦听器。在页面的第一次加载时，索引将为0.因此，您只需跟踪索引，无论是单击箭头还是单击缩略图。当然，您需要检查是否允许前一个或下一个，或者您是否已经在最后一个元素。为了检测点击了哪个缩略图来更新当前索引，可以采用不同的方法。这里使用了"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'); } }); })();标签的ID。

如果您有任何疑问，请告诉我。

向图库添加箭头 - JS

1 个答案: