无缝滚动轮播图

代码:

$(function() {
    var index = 1;
    var index1 = 0;
    $('.right').click(function() {// 点击显示下一张
        index++;
        index1++;
        if (index1 > 4) {
            index1 = 0;
        }
        // console.log(-100*index+'%');
        $('#img').animate({
            left: -100 * index + '%'
        }, 100, function() {
            if (index === 6) {
                index = 1;
                $(this).css('left', '-100%');
            }
        });
        $('ol li').eq(index1).addClass('bg').siblings().removeClass('bg');
    });

    $('.left').click(function() {//点击显示上一张；
        index--;
        index1--;
        if (index1 < 0) {
            index1 = 4;
        }
        console.log(-100 * index + '%');
        $('#img').animate({
            left: -100 * index + '%'
        }, 100, function() {
            if (index === 0) {
                index = 5;
                $(this).css('left', '-500%');
            }
        });
        $('ol li').eq(index1).addClass('bg').siblings().removeClass('bg');
    });
    $('ol li').click(function() {// 下面的按钮
        $(this).addClass('bg').siblings().removeClass("bg");
        index1 = $(this).index();
        index = index1 + 1;
        $('#img').animate({
            left: -100 * index + '%'
        }, 100);
    });
    setInterval(run, 5000);

    function run() {//自动显示下一张
        index++;
        index1++;
        if (index1 > 4) {
            index1 = 0;
        }
        // console.log(-100*index+'%');
        $('#img').animate({
            left: -100 * index + '%'
        }, 100, function() {
            if (index === 6) {
                index = 1;
                $(this).css('left', '-100%');
            }
        });
        $('ol li').eq(index1).addClass('bg').siblings().removeClass('bg');
    }
});