2011-09-22 57 views
3

是否有誰曾經使用過這個知道如何讓幻燈片在點擊下一個按鈕後繼續滾動?目前,如果你點擊'下一步'按鈕,他們會留在那張幻燈片上。使用Easyslider點擊下一個按鈕後的連續動畫1.7

我的jQuery技能略低於平均水平,如果有簡單的方法,我無法弄清自己。任何幫助將是盛大:)

Easyslider是一個jQuery插件,這裏是JS:什麼我的工作

(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:   true, 
     pause:   3000, 
     continuous:  true, 
     numeric:  false, 
     numericId:  'controls' 
    }; 

    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(); 
     var clickable = true; 
     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.continuous){ 
      $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); 
      $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); 
      $("ul", obj).css('width',(s+1)*w); 
     };    

     if(!options.vertical) $("li", obj).css('float','left'); 

     if(options.controlsShow){ 
      var html = options.controlsBefore;    
      if(options.numeric){ 
       html += '<ol id="'+ options.numericId +'"></ol>'; 
      } else { 
       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);          
     }; 

     if(options.numeric){          
      for(var i=0;i<s;i++){      
       $(document.createElement("li")) 
        .attr('id',options.numericId + (i+1)) 
        .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') 
        .appendTo($("#"+ options.numericId)) 
        .click(function(){       
         animate($("a",$(this)).attr('rel'),true); 
        });             
      };       
     } else { 
      $("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 setCurrent(i){ 
      i = parseInt(i)+1; 
      $("li", "#" + options.numericId).removeClass("current"); 
      $("li#" + options.numericId + i).addClass("current"); 
     }; 

     function adjust(){ 
      if(t>ts) t=0;  
      if(t<0) t=ts; 
      if(!options.vertical) { 
       $("ul",obj).css("margin-left",(t*w*-1)); 
      } else { 
       $("ul",obj).css("margin-left",(t*h*-1)); 
      } 
      clickable = true; 
      if(options.numeric) setCurrent(t); 
     }; 

     function animate(dir,clicked){ 
      if (clickable){ 
       clickable = false; 
       var ot = t;    
       switch(dir){ 
        case "next": 
         t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;      
         break; 
        case "prev": 
         t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1; 
         break; 
        case "first": 
         t = 0; 
         break; 
        case "last": 
         t = ts; 
         break; 
        default: 
         t = dir; 
         break; 
       }; 
       var diff = Math.abs(ot-t); 
       var speed = diff*options.speed;      
       if(!options.vertical) { 
        p = (t*w*-1); 
        $("ul",obj).animate(
         { marginLeft: p }, 
         { queue:false, duration:speed, complete:adjust } 
        );    
       } else { 
        p = (t*h*-1); 
        $("ul",obj).animate(
         { marginTop: p }, 
         { queue:false, duration:speed, complete:adjust } 
        );     
       }; 

       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.numeric) setCurrent(0); 

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

    }); 

}; 

})(jQuery); 

演示:http://cssglobe.com/lab/easyslider1.7/01.html

+0

插件代碼並不像你自己的代碼是一樣有用。除非您試圖修改此代碼,以便將此插件用作您自己的新插件的代碼庫。 – gilly3

回答

6

我把它通過修改工作easyslider1.7.js文件。

線195你有

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

我添加了一個else語句如下

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

可能不是最完美的解決方案(我不是一個JavaScript或jQuery的專家),但它似乎工作,雖然只用於左右箭頭,而不是控件。

+0

這太棒了!非常感謝。 – Luke

6

我是從卡梅倫的捐款來了,只需編輯狀態(刪除點擊!):

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

我有解決方案,以自動連續幻燈片與數字控制:

轉到線107和變化:

此:

animate($("a",$(this)).attr('rel'),true); 

這樣:

animate(parseInt($("a",$(this)).attr('rel')),true); 

然後,添加在線202如下:

} else {  
    if(clicked && options.auto && options.numeric) { 
     timeout = setTimeout(function(){ 
      animate("next",true); 
     },diff*options.speed+options.pause); 
    }; 
}; 

能解決問題!

乾杯!

+0

你能否寫下需要由你上面張貼的代碼替換的確切代碼? –

+0

我已經發布了它。你需要整個代碼嗎? – Maskter

+0

完美!謝謝,羅德 – kingkode

0

整個固定碼:

(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, 
     numeric:   false, 
     numericId:  'controls' 
    }; 

    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(); 
     var clickable = true; 
     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','width':w}); 

     if(options.continuous){ 
      $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); 
      $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); 
      $("ul", obj).css('width',(s+1)*w); 
     }; 


     if(options.controlsShow){ 
      var html = options.controlsBefore;    
      if(options.numeric){ 
       html += '<ol id="'+ options.numericId +'"></ol>'; 
      } else { 
       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);          
     }; 

     if(options.numeric){          
      for(var i=0;i<s;i++){      
       $(document.createElement("li")) 
        .attr('id',options.numericId + (i+1)) 
        .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') 
        .appendTo($("#"+ options.numericId)) 
        .click(function(){       
         animate(parseInt($("a",$(this)).attr('rel')),true); 
        });             
      };       
     } else { 
      $("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 setCurrent(i){ 
      i = parseInt(i)+1; 
      $("li", "#" + options.numericId).removeClass("current"); 
      $("li#" + options.numericId + i).addClass("current"); 
     }; 

     function adjust(){ 
      if(t>ts) t=0;  
      if(t<0) t=ts; 
      if(!options.vertical) { 
       $("ul",obj).css("margin-left",(t*w*-1)); 
      } else { 
       $("ul",obj).css("margin-left",(t*h*-1)); 
      } 
      clickable = true; 
      if(options.numeric) setCurrent(t); 
     }; 

     function animate(dir,clicked){ 
      if (clickable){ 
       clickable = false; 
       var ot = t;    
       switch(dir){ 
        case "next": 
         t = (ot>=ts) ? (options.continuous ? (t+1) : ts) : (t+1);      
         break; 
        case "prev": 
         t = (t<=0) ? (options.continuous ? (t-1) : 0) : (t-1); 
         break; 
        case "first": 
         t = 0; 
         break; 
        case "last": 
         t = ts; 
         break; 
        default: 
         t = dir; 
         break; 
       }; 
       var diff = Math.abs(ot-t); 
       var speed = diff*options.speed;      
       if(!options.vertical) { 
        p = (t*w*-1); 
        $("ul",obj).animate(
         { marginLeft: p }, 
         { queue:false, duration:speed, complete:adjust } 
        );    
       } else { 
        p = (t*h*-1); 
        $("ul",obj).animate(
         { marginTop: p }, 
         { queue:false, duration:speed, complete:adjust } 
        );     
       }; 

       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); 
       } else { 
        if(clicked && options.auto && !options.numeric) { 
         timeout = setTimeout(function(){ 
          animate("next",false); 
         },diff*options.speed+options.pause); 
        }; 

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

      }; 

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

     if(options.numeric) setCurrent(0); 

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

    }); 

}; 
})(jQuery);