2016-04-11 62 views
0

我有一張幻燈片正在快速轉向,我需要幫助瞭解如何減慢速度。任何幫助將不勝感激!如何在JQuery動畫幻燈片中調整速度?

[http://catchieconcepts.com/][1]

這是所有的代碼

jQuery(document).ready(function($){ 
 
\t var w,mHeight,tests=$("#testimonials"); 
 
\t w=tests.outerWidth(); 
 
\t mHeight=0; 
 
\t tests.find(".testimonial").each(function(index){ 
 
\t \t $("#t_pagers").find(".pager:eq(0)").addClass("active"); \t //make the first pager active initially 
 
\t \t if(index==0) 
 
\t \t \t $(this).addClass("active"); \t //make the first slide active initially 
 
\t \t if($(this).height()>mHeight) \t //just finding the max height of the slides 
 
\t \t \t mHeight=$(this).height(); 
 
\t \t var l=index*w; \t \t \t \t //find the left position of each slide 
 
\t \t $(this).css("left",l); \t \t \t //set the left position 
 
\t \t tests.find("#test_container").height(mHeight); \t //make the height of the slider equal to the max height of the slides 
 
\t }); 
 
}); 
 

 

 

 
$(".pager").on("click",function(e){ \t //clicking action for pagination 
 
e.preventDefault(); 
 
next=$(this).index(".pager"); 
 
clearInterval(t_int); \t //clicking stops the autoplay we will define later 
 
moveIt(next); 
 
}); 
 

 

 

 
function moveIt(next){ \t //the main sliding function 
 
\t var c=parseInt($(".testimonial.active").removeClass("active").css("left")); \t //current position 
 
\t var n=parseInt($(".testimonial").eq(next).addClass("active").css("left")); \t //new position 
 
\t $(".testimonial").each(function(){ \t //shift each slide 
 
\t \t if(n>c) 
 
\t \t \t $(this).animate({'left':'-='+(n-c)+'px'}); 
 
\t \t else 
 
\t \t \t $(this).animate({'left':'+='+Math.abs(n-c)+'px'}); 
 
\t }); 
 
\t $(".pager.active").removeClass("active"); \t //very basic 
 
\t $("#t_pagers").find(".pager").eq(next).addClass("active"); \t //very basic 
 
}

回答

2

jQuery animate 有JA持續時間參數。例如:

$(this).animate({'left':'-='+(n-c)+'px'}, 1000); 

持續時間以毫秒爲單位,默認設置爲400毫秒。

+0

謝謝!這放慢了從一張幻燈片到下一張幻燈片的轉換速度。 – Alexis