我有一个带有8个图像的滑块，其源代码中有一个公用文件夹( img/banana/#.png , img/strawberry/#.png 或 img/apple/#.png )每次单击滑块外的另一个图像时，我都需要进行更改；它还有一个文件夹，上面有一个水果名（香蕉、草莓或苹果）。要增加一个更高的难度，我需要的图像，作为一个不断变化的滑块图像工程，也改变了它的一部分 src 因为它改变了。
因此，如果我单击的更改图像具有src img/strawberry/1.png 并更改已创建的8个图像的src img/banana/#.png 作为src，它必须由 img/banana/1.png 8张图片中有 img/banana/#.png 必须换成 img/strawberry/#.png . 问题是，我总是会有两个不断变化的图像，我需要检测滑块的8个图像的来源，以便它们可以被单击的一个不断变化的图像替换。
这是滑块有8个香蕉图像时的代码。

<div class="row">
    <div class="col">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/banana/1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banana/2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banana/3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banana/4.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banana/5.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banana/6.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banana/7.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/banana/8.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-4">
        <img src="img/frutilla/1.png" alt="">
    </div>
    <div class="col-4">
        <img src="img/apple/1.png" alt="">
    </div>
</div>

这是我想要得到的结果，如果我点击两个变化的图像中的一个。

<div class="row">
    <div class="col">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/strawberry/1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/strawberry/2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/strawberry/3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/strawberry/4.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/strawberry/5.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/strawberry/6.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/strawberry/7.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/strawberry/8.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-4">
        <img src="img/banana/1.png" alt="">
    </div>
    <div class="col-4">
        <img src="img/apple/1.png" alt="">
    </div>
</div>

如您所见，图像上的数字始终保留，只需更改文件夹的名称（草莓、香蕉或苹果）。我在图中留下了一个例子供参考，以便更好地理解。

顺便说一句，我使用的滑块是swiperjs。