2011-09-20 92 views
0

我正在努力爲easySlider製作custome next和prev鏈接。我在滑塊JS文件中找到了animate函數。但我嘗試從我自己的JS函數中調用它。我得到函數未定義的錯誤。 這裏是滑塊的JS代碼。在另一個JS功能中調用easySlider動畫功能

(function($) { 

    $.fn.easySlider = function(options){ 

     // default configuration properties 
     var defaults = {    
      prevId:   'prevBtn', 
      prevText:  'Previous', 
      nextId:   'nextBtn', 
      nextText:  'Next', 
      controlsShow: true, 
      controlsBefore: '', 
      controlsAfter: '', 
      controlsFade: true, 
      firstId:  'firstBtn', 
      firstText:  'First', 
      firstShow:  false, 
      lastId:   'lastBtn', 
      lastText:  'Last', 
      lastShow:  false,    
      vertical:  false, 
      speed:   800, 
      auto:   false, 
      pause:   2000, 
      continuous:  false 
     }; 

     var options = $.extend(defaults, options); 

     this.each(function() { 
      var obj = $(this);    
      var s = $("li", obj).length; 
      var w = $("li", obj).width(); 
      var h = $("li", obj).height(); 
      obj.width(w); 
      obj.height(h); 
      obj.css("overflow","hidden"); 
      var ts = s-1; 
      var t = 0; 
      $("ul", obj).css('width',s*w);   
      if(!options.vertical) $("li", obj).css('float','left'); 

      if(options.controlsShow){ 
       var html = options.controlsBefore; 
       if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; 
       html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; 
       html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; 
       if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>'; 
       html += options.controlsAfter;      
       $(obj).after(html);          
      }; 

      $("a","#"+options.nextId).click(function(){  
       animate("next",true); 
      }); 
      $("a","#"+options.prevId).click(function(){  
       animate("prev",true);    
      }); 
      $("a","#"+options.firstId).click(function(){   
       animate("first",true); 
      });    
      $("a","#"+options.lastId).click(function(){  
       animate("last",true);    
      });  

      function animate(dir,clicked){ 
       var ot = t;    
       switch(dir){ 
        case "next": 
         t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;      
         break; 
        case "prev": 
         t = (t<=0) ? (options.continuous ? ts : 0) : t-1; 
         break; 
        case "first": 
         t = 0; 
         break; 
        case "last": 
         t = ts; 
         break; 
        default: 
         break; 
       }; 

       var diff = Math.abs(ot-t); 
       var speed = diff*options.speed;      
       if(!options.vertical) { 
        p = (t*w*-1); 
        $("ul",obj).animate(
         { marginLeft: p }, 
         speed 
        );    
       } else { 
        p = (t*h*-1); 
        $("ul",obj).animate(
         { marginTop: p }, 
         speed 
        );     
       }; 

       if(!options.continuous && options.controlsFade){      
        if(t==ts){ 
         $("a","#"+options.nextId).hide(); 
         $("a","#"+options.lastId).hide(); 
        } else { 
         $("a","#"+options.nextId).show(); 
         $("a","#"+options.lastId).show();     
        }; 
        if(t==0){ 
         $("a","#"+options.prevId).hide(); 
         $("a","#"+options.firstId).hide(); 
        } else { 
         $("a","#"+options.prevId).show(); 
         $("a","#"+options.firstId).show(); 
        };     
       };    

       if(clicked) clearTimeout(timeout); 
       if(options.auto && dir=="next" && !clicked){; 
        timeout = setTimeout(function(){ 
         animate("next",false); 
        },diff*options.speed+options.pause); 
       }; 

      }; 
      // init 
      var timeout; 
      if(options.auto){; 
       timeout = setTimeout(function(){ 
        animate("next",false); 
       },options.pause); 
      };  

      if(!options.continuous && options.controlsFade){      
       $("a","#"+options.prevId).hide(); 
       $("a","#"+options.firstId).hide();    
      };    

     }); 

    }; 

})(jQuery); 

和功能這我試圖調用的是「有生命的」 我的函數調用這裏

animate("next",false); 

你能指導我如何做出正確的函數調用?

回答

0

這個怎麼樣解決方法:

$('#nextBtn a').click();

而且

$('#prevBtn a').click();

就像一個魅力(假設你沒有改變下一/上一個按鈕元素的CSS IDS)