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

【问题标题】：Image Slider that opens images from different folders on different button click图像滑块，可在不同按钮单击时打开来自不同文件夹的图像
【发布时间】：2018-02-26 00:51:19
【问题描述】：

我有一个图像滑块，可以打开同一文件夹中的不同图像（在 文件夹 img1 中命名图像 1.jpg、2.jpg）。如果我可以在图像滑块下方有按钮，是否可以提供来自不同文件夹的滑动图像（1.jpg，2.jpg from folder img2 ; 1.jpg,2.jpg from 文件夹 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>

【问题讨论】：

您只想通过按钮切换到另一个文件夹？这两个文件夹中的图片名称相同吗？
是的，这正是我想要的，只需单击它下方的按钮，滑块就会从文件夹 2 中获取并显示图像。我将保持名称不变。
我在答案中实现的文件夹的无限变化怎么样？此解决方案适合您，还是您正在寻找其他解决方案？

标签： javascript jquery html css image

【解决方案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>

【讨论】：

【解决方案2】：

你可以通过下面的sn-p将文件夹无限切换到下一个：

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);

<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>

【讨论】：