Javascript 在一页jquery上显示两个旋转木马

我有以下代码

我希望能够在同一页上有两个旋转木马实例

如何修改我的JS？我只是不是JS方面的专家。我尝试了几件事，首先：

function runCarousel(id){

}

我还使用了一个全局计数器，我如何定位它以通过所有图像

创建我的runCarousel脚本以获取如下参数

---

但它的装载不好。有人能帮我吗？提前谢谢

要获得两个实例，页面上需要两个carousel div。在这把小提琴中，我刚刚复制了您的旋转木马包装div，并将其粘贴在第一个下方。我正在研究你提供的第二把小提琴，但看起来下面的小提琴符合你的要求

两个传送带：

我复制并粘贴了以下div：

<div class="jcarousel-wrapper">

---

为转盘创建一个如下所示：

var Carousel = {
imgCounter : 0,
delay : 5000,
id : '',
runCarousel : function (){
    var that = this;
    var done = 0;
    if(that.id!=undefined && that.id!=''){
        var img_len = $('#'+that.id+" .jcarousel ul li img").length;

        $('#'+that.id+" .jcarousel ul li img").each(function(){
            if($(this).css('display')=='block' && done==0){
                that.imgCounter++;
                if(that.imgCounter == img_len){
                   $(this).css('display','none');
                    that.imgCounter = 0;
                    $('#'+that.id+" .jcarousel ul li img").css('display','none');
                    $('#'+that.id+" .jcarousel ul li").find('img:eq(0)').css('display','block');
                } else {
                    $(this).css('display','none');
              $(this).parent().next().find('img').css('display','block');
                }
                done = 1;
            }
        });
        setTimeout(function() {
            that.runCarousel();
        }, that.delay);
    }
  }
}

var carousel1 = Object.create(Carousel);
carousel1.id = "showSlider1";
carousel1.delay = 5000;
carousel1.runCarousel();
var carousel2 = Object.create(Carousel);
carousel2.id = "showSlider2";
carousel2.delay = 5000;
carousel2.runCarousel();

并像这样实例化：

var Carousel = {
imgCounter : 0,
delay : 5000,
id : '',
runCarousel : function (){
    var that = this;
    var done = 0;
    if(that.id!=undefined && that.id!=''){
        var img_len = $('#'+that.id+" .jcarousel ul li img").length;

        $('#'+that.id+" .jcarousel ul li img").each(function(){
            if($(this).css('display')=='block' && done==0){
                that.imgCounter++;
                if(that.imgCounter == img_len){
                   $(this).css('display','none');
                    that.imgCounter = 0;
                    $('#'+that.id+" .jcarousel ul li img").css('display','none');
                    $('#'+that.id+" .jcarousel ul li").find('img:eq(0)').css('display','block');
                } else {
                    $(this).css('display','none');
              $(this).parent().next().find('img').css('display','block');
                }
                done = 1;
            }
        });
        setTimeout(function() {
            that.runCarousel();
        }, that.delay);
    }
  }
}

var carousel1 = Object.create(Carousel);
carousel1.id = "showSlider1";
carousel1.delay = 5000;
carousel1.runCarousel();
var carousel2 = Object.create(Carousel);
carousel2.id = "showSlider2";
carousel2.delay = 5000;
carousel2.runCarousel();

---

将解决此问题。

但随后将显示一个空白画布。我不希望这样。我希望它能够在两个旋转木马上的所有图像中循环，并且在任何时候都不应该在两个旋转木马上都有一个空白的旋转木马。关键是img_计数器，以使其正确。。但是，我无法修改代码使其如此。。现在，img_计数器是全局性的，这就是为什么它不能以我想要的方式对两个旋转木马都起作用。我曾经用两个单独的旋转木马功能启动它，但是通过传递图像ID无法使它起作用。我今天有空时会再试一次。我已经解决了它。谢谢。我很快就会发布我的解决方案。