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

一个图像使用左键输入动画

1 个答案: