Javascript 如何在一个页面上运行添加两个“图像幻灯片”

我想在同一页上运行两个幻灯片放映

下面是一些类似于我所创造的东西：

我可以运行第一个幻灯片放映，但第二个幻灯片放映不起作用，当我单击第二个幻灯片放映控件时，第一个幻灯片放映就起作用了

问题背后的原因是，我在两个幻灯片放映中使用了相同的结构和类名，我为两个幻灯片的大多数父DIV提供了不同的ID，但问题是我不知道如何在用户单击时获取信息，即幻灯片用户单击的信息？以及相应地如何更新幻灯片以适用于特定的DIV

这是我的密码： HTML

CSS

JS

如果您需要任何其他信息，请告诉我

---

请建议。

尝试向javascript添加新变量，并在html的另一个滑块上更改这些类。范例

var thumbs = $('ul.thumbsImages2 li');
var images = $('ul.previewImages2 li');

另外，别忘了将这些新类添加到css中。范例

    #compareImageBox ul.previewImages li img,
    #compareImageBox ul.previewImages2 li img {
        margin-top: 20px;
        max-width: 530px;
        max-height: 550px;
    }

<script>
var thumbs = $('ul.thumbsImages li');
var images = $('ul.previewImages li');
var lastElem = thumbs.length - 1;
var target;

thumbs.first().addClass('selected');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    thumbs.removeClass('selected').eq(target).addClass('selected');
}

thumbs.click(function () {
    if (!$(this).hasClass('selected')) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function () {
    target = $('ul.thumbsImages li.selected').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function () {
    target = $('ul.thumbsImages li.selected').index();
    lastElem = thumbs.length - 1;
    target === 0 ? target = lastElem : target = target - 1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.thumbsImages li.selected').index();
    target === lastElem ? target = 0 : target = target + 1;
}
var timingRun = setInterval(function () {
    sliderTiming();
}, 5000);

function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function () {
        sliderTiming();
    }, 5000);
}

var thumbs = $('ul.thumbsImages2 li');
var images = $('ul.previewImages2 li');

    #compareImageBox ul.previewImages li img,
    #compareImageBox ul.previewImages2 li img {
        margin-top: 20px;
        max-width: 530px;
        max-height: 550px;
    }