img öğelerinin döngü ve rastgele uygulamak slayt efektleri (yukarı, aşağı, sağa, sola)

Question

Ben img elemanları aracılığıyla Ben döngü ve rastgele onlara slideUp(), slideDown(), slideLeft() ve slideRight() efektler uygulamak istediğiniz Aşağıdaki kod:

var sliderEffects = ["slideUp", "slideDown", "slideLeft", "slideRight"]; 
    function slideLeft(){ 
     console.log("slide left"); 
    } 
    function slideLeft(){ 
     console.log("slide right"); 
    } 
    function randomFrom(items) { 
     return items[Math.floor(Math.random()*items.length)]; 
    } 
    // console.log(randomFrom(effects)); 
    $c.each(function(){ 
     $(this).find('img:gt(0)').hide(); 

     setInterval(function() {   
      $(this).find(':first-child') 
      [randomFrom(sliderEffects)]() 
      .next('img') 
      .fadeIn() 
      .end() 
      .appendTo(this) 
     }.bind(this), 3000 + Math.random()*4000); // 4 seconds 
    }); 

slideUp() ve slideDown() ile

ve jQuery yöntemleri oldukları gibi, iyi çalışıyor. Yöntemlerimi çağırmaya çalıştığımda sorun oluşur: slideLeft() ve slideRight(). Benim özelliklerini eklemek için eleman nesnesini uzanan çalıştı:

jQuery.fn.extend({ 
     slideLeft: function() { 
      console.log("slide left"); 
     }, 
     slideRight: function() { 
      console.log("slide right"); 
     }, 
    }); 

Yani, farklı geri aramalar rastgele yürütebileceği konusunda herhangi bir fikir? Yani, burada

Answer 1

ne senin dizi fonksiyonları yerine dizeler dizisi yapamaz^_^

var sliderEffects = ["myslideUp", "slideLeft", "slideRight", "myslideDown"]; 


(function($) { 
    $.fn.slideLeft = function() { 
     return this.animate({left:jQuery(this).width()},1000) }; 
})(jQuery); 

(function($) { 
    $.fn.slideRight = function() { 
     return this.animate({left:-(jQuery(this).width())},1000) }; 
})(jQuery); 

(function($) { 
    $.fn.myslideDown = function() { 
     return this.animate({top:(jQuery(this).height())},1000) }; 
})(jQuery); 

(function($) { 
    $.fn.myslideUp = function() { 
     return this.animate({top:-(jQuery(this).height())},1000) }; 
})(jQuery);