javascript - 自己用jq写的图片轮播有个小bug自己没思路改了，大神看下给点思路

双击……因为你后面只缓冲了一张图片，双击要切换两张，所以就有可能出问题

有两个办法

一个是禁止双击，在动画中判断一个动画没结束的时候禁止执行下一次动画。相应的你所有点击操作都要去进行检查，如果动画没执行成功就不能去改变序号。

第二个办法就是加两个图片缓冲，动画顺序执行，执行完之后再设置 left 到第1张或第2张图（你现在好像是执行前改的 left）

处理了一下向右的情况

只处理了向右，没处理向左，向左只是要改下计算

$(".right").click(function() {
    v++;
    console.log(v);
    // if (v > 6) {
    //     $(".inner").css({
    //         left: "0px"
    //     });
    //     v = 1;
    // }
    animate(v * -750);
});

var WIDTH = 750;
var COUNT = 6;
var TOTAL = 750 * 6;
var TIME = 500;

function animate(offset) {
    // 只考虑了右移出界的情况，左移出界类似

    var inner = $(".inner");
    var left = inner.position().left;

    // 如果偏移未到底，正常执行动画
    if (offset >= -TOTAL) {
        inner.stop().animate({
            left: offset + "px"
        }, TIME);
        return;
    }

    // 下面是偏到底并过头的情况

    // 先算出来到底剩余多少量
    var rest = left + TOTAL;
    // 以及到底之后还需要偏移多少量
    var more = -offset - TOTAL;

    // 根据上面的比较把 TIME 分成两个部分
    var t1 = ~~(TIME * rest / (rest + more));
    var t2 = TIME - t1;
    console.log(rest, more, t1, t2);

    // 执行第一个动画，把剩余未移动完的部分移动完
    inner.stop().animate({
        left: -TOTAL + "px"
    }, t1, function() {
        // 第一个动画完成之后会调用这个回调
        // 这个时候先重置 inner 位置
        v = 1;
        inner.css("left", "0px")
            // 再执行另一个动画完成剩下需要偏移的部分
            .animate({
                left: -more + "px"
            }, t2);
    });
}