2010-07-08 15 views
7

Actualmente estoy usando jQuery.Cycle para desplazarse a través de algunos niños <div> etiquetas. Sin embargo, quiero que el ciclo predeterminado fx sea fade, y cuando hago clic en los selectores next o prev, quiero que el ciclo fx cambie temporalmente a scrollRight o scrollLeft según el selector en el que se haga clic.jQuery.Cycle - utilizar dos efectos diferentes en un mismo recipiente

¿Esto es posible?

código de jQuery, si es necesario:

$('#banner_content').cycle({ 
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    timeout: 6500, 
    speed: 2000, 
    next: $("#right_arrow a"), 
    prev: $("#left_arrow a"), 
}); 

Respuesta

11

Ok, he añadido a mi pregunta sobre la jQuery Forum, y el creador respondió con la siguiente answer.

Aquí está mi código que he desarrollado para esto:

var slideIndex = 0; 
var nextIndex = 0; 
var prevIndex = 0; 

$('#banner_content').cycle({ 
    fx: 'fade',//fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    timeout: 8000, 
    speed: 1000, 
    easingIn:20, 
    easingOut:40, 
    after: function(currSlideElement, nextSlideElement, options) { 
     slideIndex = options.currSlide; 
     nextIndex = slideIndex + 1; 
     prevIndex = slideIndex -1; 

     if (slideIndex == options.slideCount-1) { 
      nextIndex = 0; 
     } 

     if (slideIndex == 0) { 
      prevIndex = options.slideCount-1; 
     } 
    } 
}); 

$("div.left_arrow a").click(function() { 
    $('#banner_content').cycle(nextIndex, "scrollRight"); 
}); 

$("div.right_arrow a").click(function() { 
    $('#banner_content').cycle(prevIndex, "scrollLeft"); 
}); 
Cuestiones relacionadas