jquery - 一张图片用左右按钮动画

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;
});

这是小提琴

Answer 1

看到这个： 小提琴

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;
});