последовательный цикл jquery - PullRequest
Новая
       1

последовательный цикл jquery

1 голос
/ 18 января 2011

На странице у меня есть 4 деления слайд-шоу.Давайте назовем их divA-divD.Каждый div имеет 2 набора изображений.

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

Тайм-аут = 4000 (4 секунды) divA = 1000 + Тайм-аут (1 секунда) divB = 1333 + Тайм-аут divC = 1666 + Тайм-аут divD= 2000 + Тайм-аут (2 секунды)

Теперь мой текущий код для этого 

var timeout = 4000;
$('.divA').cycle({
    fx:     'fade',
    speed:  2000,
    timeoutFn: 1000+timeout
});
$('.divB').cycle({
    fx:     'fade',
    speed:  2000,
    timeoutFn: 1333+timeout
});

и так далее с divC и divD

, но результат будет таким:

divA = 1000 + 4000 = 5000
divB = 1333 + 4000 = 5333
divC = 1666 + 4000 = 5666
divD = 2000 + 4000 = 6000

Это будетсделать, чтобы divD в конечном итоге догнал divA, если оставить его слишком длинным, потому что:

divA = 5,10,15,20,25,30
divD = 6,12,18,24,30

Пятый слайд divD будет одновременно с шестым слайдом divA.

Я хочу, чтобы цикл как-то приостанавливался после цикла divD.Вот как это выглядит:

1-4-я секунда: показать изображения
4-5-я секунда: исчезновение divA - divD, затем сделать паузу еще на 4 секунды
5-8-я секунда: неподвижная пауза
9-10-я секунда: еще один цикл, затем пауза еще на 4 секунды
10-13-я секунда: пауза
и т. Д.

Я создал формулу, но обнаружил трудности в ее реализации

тайм-аут * (индекс) + (1000 * (индекс-1));

divA = тайм-аут * (индекс) + (1000 * (индекс-1))
divB = тайм-аут* (индекс) + (1000 * (индекс-1) + 333)
divC = время ожидания * (индекс) + (1000 * (индекс-1) + 666)
divD = время ожидания * (индекс) + (1000 * (index-1) + 1000)

где index = цикл слайдов (1,2,3,4,5, .....)

, которые сделают

divA = 4000 * 1 + 1000 * (0) = 4000, 4000 * 2 + 1000 * (1) = 9000 и т. Д.
divB = 4000 * 1 + 1000 * (0) + 333 =4333, 4000 * 2 + 1000 * (1) + 333 = 9333 и т. Д.
divC = 4000 * 1 + 1000 * (0) + 666 = 4666, 4000 * 2 + 1000 * (1) + 666 = 9666,и т. д.
диvD = 4000 * 1 + 1000 * (0) + 1000 = 5000, 4000 * 2 + 1000 * (1) + 1000 = 10000 и т. д.

Вопрос в том, как я могу это сделать в цикле jquery?Я пытался использовать timeoutFn и иметь функцию обратного вызова, как это: 

function calculateTimeout(currElement, nextElement, opts, isForward) { 
    var index = opts.currSlide; 

    return timeout * (index) + (1000* (index-1)); 
}

, но индекс остается 0-> 1-> 0-> 1-> и т. Д. (Потому что у меня только два изображения на div)

Извините, если это слишком долго или я не достаточно ясен, и заранее спасибо за ваши ответы

1 Ответ

0 голосов
/ 18 января 2011

я нашел решение!

http://jsfiddle.net/uygey/4/

или если вы хотите читать, прочитайте ниже. это что-то вроде хака / чита, но все, что работает, я думаю:) 

var index = -1;

$('.divA,.divB,.divC,.divD').cycle({
fx:     'fade',
speed:  2000,
timeoutFn: calculateTimeout
});

function calculateTimeout(currElement, nextElement, opts, isForward) { 
var class = $(currElement).parent().attr('class');
var timeout = 4000;
var wait;
if(class=="divA"){
wait = 0;
}else if(class=="divB"){
wait = 333;    
}else if(class=="divC"){
wait = 666;
}else if(class=="divD"){
wait = 1000;
}

if(class=="divA"){
index++; 
}    

return timeout * (index) + ((1000* (index-1)) + wait); 

}
...