Question

我有一个图像滑块，可以打开同一文件夹中的不同图像（在文件夹img1 中命名为图像1.jpg，2.jpg）。如果我可以在图像滑块下面有按钮，可以从不同的文件夹中获得滑动图像（1.jpg，来自文件夹img2 的2.jpg; 1.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）属性，并更改您正在使用的路径。

这取决于实现，因为lib可能会在初始化时缓存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>

Answer 2

您可以通过以下代码段无限地将文件夹更改为下一个文件夹：

＆＃13;

function logImagesPaths() {
  $("#slider").children().each(function(item) {
    console.log($(this).attr("data-src"))
  });
}

function changeFolder() {
  $("#slider").children().each(function(item) {
    var oldDataSrc = $(this).attr("data-src");
    var newDataSrc = getNewPath(oldDataSrc);
    $(this).attr("data-src", newDataSrc);
    logImagesPaths();
  });
}

function getNewPath(data) {
  var index = data.indexOf('/');
  var folder = data.substring(0, index);
  var folderNumber = folder.slice(3, folder.length);
  var newFolderNumber = parseInt(folderNumber) + 1;
  var newFolder = data.replace(folder, 'img' + newFolderNumber);
  return newFolder;
}

logImagesPaths();

$('#changeFolderBtn').on('click', changeFolder);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
    <img data-src="img1/1.jpg" alt="Slide 1" />
    <img data-src="img1/2.jpg" alt="Slide 2" />
    <img data-src="img1/3.jpg" alt="Slide 3" />
    <img data-src="img1/4.jpg" alt="Slide 4" />
</div><button id="changeFolderBtn">Images from new folder</button>

＆＃13;

图像滑块在不同的按钮单击时打开来自不同文件夹的图像

2 个答案: