javascript - jquery, Slider 只转一次

Question

我有这个，这是一个图像滑块，当它到达终点并返回时，它会继续转动：

 $(function () {
    var sliderUL = $('div.headslide').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width,
    imgsLenth = imgs.length,
    current = 1,
    totalImgsWidth = imgsLenth * imgWidth,
    direction = 'next',
    loc = imgWidth,
    interval = setInterval(swapBKgnd, 9000);

function swapBKgnd() {

    (direction === 'next') ? ++current : --current;

    if (current === 0) {
        current = imgsLenth;
        loc = totalImgsWidth - imgWidth;
        direction = 'next';
    } else if (current - 1 === imgsLenth) {
        current = 1;
        loc = 0;
    }


    transition(sliderUL, loc, direction);
};

function transition(container, loc, direction) {
    var unit;

    if (direction && loc !== 0 ) {
        unit = (direction === 'next') ? '-=' : '+=';
    }

    container.animate({
        'margin-left': unit ? (unit + loc) : loc,
    });
}
});

它的意思是继续前进，但是一旦到达终点并回到第一个……它就停止了。我将如何解决这个问题？

Answer 1

当您到达图像的末尾时，您设置loc = 0然后current = 1. 但是，在下一次迭代中，locis still 0，所以它不会移动。您需要添加一个else：

if (current === 0) {
    current = imgsLenth;
    loc = totalImgsWidth - imgWidth;
    direction = 'next';
} else if (current - 1 === imgsLenth) {
    current = 1;
    loc = 0;
} else {
    loc = imgWidth;
}

演示：http: //jsfiddle.net/jtbowden/5W8Av/