jQuery無限旋轉木馬用縮略圖

Question

我正在製作滑塊，並且我的縮略圖出現了一些問題，它們的動畫更快，然後主圖像漸變，（在幾個拇指動畫後，它們與動畫的asyncrone主滑......他們需要在同一時刻），它們具有相同的速度，所以我不明白爲什麼會產生這個錯誤...

jQuery(document).ready(function(){ 
    speed = 8000; 
    max_slide = jQuery(".slides_control div.fps-slide").size(); 
    val_x = 0; 
    run = setInterval('rotate()', speed); 

    jQuery("#slider").hover(
     function() { clearInterval(run); }, 
     function() { run = setInterval('rotate()', speed); } 
    ); 


}); 



function rotate() { 
    thumbFirst = jQuery(".fps-pagination li:first-child"); 
    thumbContainer = jQuery(".fps-pagination"); 
    animationSpeed = 800; 
    if (val_x > max_slide) { val_x = 0 } 

    thumbFirst.clone().appendTo(jQuery(".fps-pagination")); 

    jQuery(".slides_control div.fps-slide:eq("+val_x+")").animate({"opacity":"0"}, { queue: false, duration: animationSpeed }); 
    val_x++; 
    jQuery(".slides_control div.fps-slide:eq("+val_x+")").animate({"opacity":"1"}, { queue: false, duration: animationSpeed }); 

    thumbContainer.animate(
     {"top":"-137px"}, 
     {queue:false, duration: animationSpeed, 
     complete: function() { 
      thumbFirst.remove(); 
      thumbContainer.css({"top": "0px"}) 
     } 
    }); 
} 

的jsfiddle：http://jsfiddle.net/AY3y2/1/（在此運作良好environement） 住的代碼：http://webserver.lewebsimple.ca/~tempcode/

Answer 1

你可以做一個簡短的jsfiddle例子嗎？

編輯

使用該旋轉功能，你的問題是，如果val_x> maxSlide 它必須> =和val_X ++後，但嘗試

function rotate() { 
    thumbFirst = jQuery(".fps-pagination li:first-child"); 
    thumbContainer = jQuery(".fps-pagination"); 
    animationSpeed = 800; 


    thumbFirst.clone().appendTo(jQuery(".fps-pagination")); 

    jQuery(".slides_control div.fps-slide:eq(" + val_x + ")").animate({ "opacity": "0" }, { queue: false, duration: animationSpeed }); 
    val_x++; 
    if (val_x >= max_slide) { val_x = 0 } 
    jQuery(".slides_control div.fps-slide:eq(" + val_x + ")").animate({ "opacity": "1" }, { queue: false, duration: animationSpeed }); 

    console.log(jQuery(".slides_control div.fps-slide:eq(" + val_x + ")").length + "valor x " + val_x); 

    thumbContainer.animate({ "top": "-137px" }, { queue: false, duration: animationSpeed, complete: function() { thumbFirst.remove(); thumbContainer.css({ "top": "0px" }) } }); 
}