一個圖像帶有左右按鈕的動畫

Question

當我點擊網站中的左側和右側箭頭時，圖片會相應地移動，但是當我開始點擊右側箭頭時，圖片被拋出塊限制。正常的動畫圖片是100像素，但正如我所提到的，程序上面的問題不知道像素的位置，而我們快速點擊箭頭。 我要你通知或給我解釋一下這個問題是如何固定 謝謝

的html代碼：

<div class="slider"> 
    <img src="http://lh5.googleusercontent.com/-k__maLyJIPw/UWV1-WyW9rI/AAAAAAAAAJk/MVfNsKPQLsU/s1539/slider.png" alt="" /> 
    <a href="" class="left">left</a> 
    <a href="" class="right">right</a> 
</div> 

jQuery代碼：

var left_animate = '+=100px'; 
var right_animate = '-=100px'; 

$('.slider .left').click(function() { 

    var img_left_position = $('.slider img').position().left; 

    if (img_left_position == 0) { 
     return false; 
    } 
    $('.slider img').stop(true, true).animate({ 
     left: left_animate 
    }); 
    return false; 
}); 

var imgi = $(".slider img").width(); 

$('.slider .right').click(function() { 

    var img_left_position = $('.slider img').position().left; 
    if (imgi + img_left_position == 1600) { 

     return false; 
    } 


    $('.slider img').stop(true, true).animate({ 
     left: right_animate 
    }); 
    return false; 
}); 

這裏是fiddle

Answer 1

看到這個：Fiddle

var newpos; 
$('.slider .left').click(function(){ 
    var img_left_position = $('.slider img').position().left; 
    newpos = img_left_position + 100 < 0 ? img_left_position + 100 : 0; 
    $('.slider img').stop(true,true).animate({ 
     left: newpos 
    }); 
    return false; 
}); 

var imgi = $(".slider img").width(); 
$('.slider .right').click(function(){ 
    var img_left_position = $('.slider img').position().left; 
    newpos = img_left_position - 100 > -1600 ? img_left_position - 100 : -1600; 
    $('.slider img').stop(true,true).animate({ 
     left: newpos 
    }); 
    return false; 
});