2010-07-08 7 views
7

ich zur Zeit mit jQuery.Cycle, um durch ein paar Kind <div> Tags. Ich möchte jedoch, dass der Standardzyklus fx fade ist, und wenn ich auf die next oder prev Auswahlschalter klicke, möchte ich den Zyklus fx vorübergehend zu scrollRight oder scrollLeft abhängig von dem ausgewählten Selektor ändern.jQuery.Cycle - verwenden, um zwei unterschiedliche Effekte auf demselben Container

Ist das möglich?

jQuery-Code, falls erforderlich:

$('#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"), 
}); 

Antwort

11

Ok, habe ich meine Frage nach der jQuery Forum, und der Schöpfer antwortete mit der folgenden answer.

Hier ist mein Code, die ich für diese entwickelt:

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"); 
});