Question

我希望能够在同一页面上有两个轮播实例。

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

function runCarousel(id){

}

此外，我使用了一个全局计数器，如何对其进行本地化以浏览所有图像？

创建我的runCarousel脚本以获取此http://jsfiddle.net/4wEbj/3/

之类的参数

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

Answer 1

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

两个转盘：http://jsfiddle.net/4wEbj/4/

我复制了下面的div并粘贴了它：

<div class="jcarousel-wrapper">

Answer 2

创建一个像这样的轮播：

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

可以解决问题。

在一页jquery上显示两个轮播

2 个答案: