0

私はこれを持っています。これは、最後に到達して戻ると、循環し続けることを意図した画像スライダーです。

 $(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,
    });
}
});

それは続けることを意図していますが、最後に到達して最初に戻ると... 停止します。どうすればこれを修正できますか?

4

1 に答える 1

0

画像の最後に到達したら、 を設定loc = 0し、次にを設定しますcurrent = 1。ただし、次の反復では、locはまだ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/

于 2013-04-16T18:26:28.670 に答える