Блог

Главная - Вопросы по программированию - отображение двух каруселей на одной странице jquery

отображение двух каруселей на одной странице jquery

#javascript #jquery #settimeout #carousel

#javascript #jquery #settimeout #карусель

Вопрос:

У меня есть следующий код http://jsfiddle.net/4wEbj/2 /

Я хочу иметь возможность иметь два экземпляра карусели на одной странице.

Как я могу изменить свой JS? Я просто не эксперт в JS. Я попробовал несколько вещей, во-первых:

 function runCarousel(id){

}

Также я использовал один глобальный счетчик, как я могу локализовать его, чтобы просмотреть все изображения?

Создание моего скрипта runCarousel для приема параметров, подобных этому http://jsfiddle.net/4wEbj/3 /

Но он плохо загружается. Кто-нибудь может мне помочь? Заранее спасибо!

Ответ №1:

Чтобы получить два экземпляра, вам понадобятся два раздела карусели на странице. В этой скрипке я только что скопировал ваш div-файл-оболочку для карусели и вставил его под первым. Я изучаю вторую, которую вы предоставили, но похоже, что приведенная ниже скрипка делает то, что вы хотите.

две карусели: http://jsfiddle.net/4wEbj/4 /

я скопировал следующий div и вставил его:

 <div class="jcarousel-wrapper">

Комментарии:

1. Но затем он отображает пустой холст. Я этого не хочу.

2. Я хочу, чтобы он мог перебирать все изображения на обеих каруселях, и в любое время на обеих каруселях не должно быть пустой карусели

3. ключ — img_counter, чтобы все было правильно.. Однако я не могу изменить код, чтобы сделать это так .. Прямо сейчас img_counter является глобальным, и именно поэтому он не может работать для обеих каруселей так, как я хочу..

4. Я заставил его работать с двумя отдельными запусками функции carousel, но не смог заставить его работать, передав идентификатор изображения. Я попробую еще раз сегодня, когда у меня будет немного свободного времени.

5. Я уже решил это. Большое спасибо. Скоро опубликую свое решение.

Ответ №2:

Создайте для карусели вот так:

 var Carousel = {
imgCounter : 0,
delay : 5000,
id : '',
runCarousel : function (){
    var that = this;
    var done = 0;
    if(that.id!=undefined amp;amp; 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' amp;amp; 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();

решит проблему.