轮播图 j s

var nowIndex = 0,
    w = $('.wrapper').width(),
    len = $('.item').length,//5
    flag = true,//给点击加锁，只有当当前的图片滑动完事后才能被点击；
    slider_timer = undefined;
function init() {
    bindEvent();
    slider_auto();
}
init();
function bindEvent() {
    $('.preBtn').add($('.nextBtn')).add($('.item'))
        .on('click', function () {
            if ($(this).attr('class') == 'preBtn') {
                move('pre');
                changeOrderStyle(nowIndex);
            } else if ($(this).attr('class') == 'nextBtn') {
                move('next');
                changeOrderStyle(nowIndex);
            } else {
                //    move($(this).index()); 
                //    $(this).siblings().removeClass('active').end().addClass('active');
                nowIndex = $(this).index();
                move(nowIndex);
                changeOrderStyle(nowIndex);
            }
        })
    $('.wrapper').mouseover(function(){
        clearTimeout(slider_timer);
        $('.btn').css('display','block');
    })
    .mouseout(function(){
        slider_auto();
        $('.btn').css('display','none');

    })
}
function move(direction) {
    if (flag) {
        flag = false;
        if (direction == 'pre' || direction == 'next') {
            if (direction == 'pre') {//往前翻图片往左走  left变负值
                if (nowIndex == len - 1) {//当是最后一张的时候  将ul的left值拖到第一张
                    nowIndex = 0;//先轮播最后一张图片（和第一张相同），轮播完最后一张后调用毁掉函数，然后瞬间挪到第一张 因为图片相同 变换的瞬间看不出差别
                    $('.img-box').animate({ left: -(w * len) }, function () {
                        $(this).css('left', 0);
                        clearTimeout(slider_timer);
                        slider_auto('next');//让其自动播放  在每次点击之后 继续调用自动播放函数
                        flag=true;
                    });

                } else {
                    nowIndex += 1;
                    $('.img-box').animate({ 'left': -(w * nowIndex) }, function () {
                        clearTimeout(slider_timer);
                        slider_auto('next');//让其自动播放
                        flag=true;
                    });
                }

            } else {
                if (nowIndex == 0) {
                    $('.img-box').css('left', -(w * len));//从第一张迅速跳转到最后一张（和第一张图片相同）旁人根本看不出变化
                    //若使用animate函数  ul移动的过程会比较缓慢能看到所有图片的变化，很不自然
                    nowIndex = len - 1;
                } else {
                    nowIndex -= 1;
                }
                $('.img-box').animate({ 'left': -(w * nowIndex) }, function () {
                    clearTimeout(slider_timer);
                    slider_auto('next');//让其自动播放
                    flag=true;
                });

            }
        } else {
            nowIndex = direction;
            $('.img-box').animate({ 'left': -(w * nowIndex) }, function () {
                clearTimeout(slider_timer);
                slider_auto('next');//让其自动播放
                flag=true;
            });
        }
    }
}
function changeOrderStyle(index) {
    $('.active').removeClass('active');
    $('.item').eq(index).addClass('active');
}

function slider_auto() {
    slider_timer = setTimeout(function () {
        move('next');
        changeOrderStyle(nowIndex);
    }, 3000)
}

标签：function,轮播,auto,timer,slider,nowIndex,left
来源： https://blog.csdn.net/koukou0419/article/details/81698026