javascript - 图像 slider 可在不同按钮单击上打开不同文件夹中的图像

Question

我有一个图像 slider ，可以打开同一文件夹中的不同图像(在文件夹img1中将图像命名为1.jpg、2.jpg)。是否可以在图像 slider 下方添加按钮，为我提供来自不同文件夹的滑动图像(文件夹 img2 中的 1.jpg,2.jpg ；文件夹中的 1.jpg,2.jpg >文件夹img3)

<div id="slider">
    <img src="img/1.jpg" alt="Slide 1" />
    <img data-src="img/2.jpg" alt="Slide 2" />
    <img data-src="img/3.jpg" alt="Slide 3" />
    <img data-src="img/4.jpg" alt="Slide 4" />
</div><button>Images from new folder</button> 

Answer 1

我猜您正在使用在 data-src 中显示图像的库/代码。 基本上，您可以动态更改'data-src'(或仅图像'src)属性并更改您正在使用的路径。

这取决于实现，因为库可能会在初始化时缓存data-src，然后忽略对其的更改。

无论如何，您可以这样做(我在本例中使用src，但您也可以更改为data-src):

var gallery = document.querySelector('#gallery');
var button = document.querySelector('#your-button-id');

button.addEventListener('click', () => setImagesFolder('folderName'));

function setImagesFolder(folder) {
  gallery.querySelectorAll('img').forEach(imgEl => {
    var currPath = imgEl.getAttribute('data-src');
    var basePath = currPath.slice(currPath.lastIndexOf('/'))
    console.log(folder + basePath)
    imgEl.setAttribute('src', folder + basePath)
  })
}

<div id="gallery">
  <img data-src="folder/1.jpg">
  <img data-src="folder/2.jpg">
  <img data-src="folder/3.jpg">
  <img data-src="folder/4.jpg">
  <img data-src="folder/5.jpg">
</div>
<button id="your-button-id">Change images path</button>