标签：function 轮播 auto timer slider nowIndex left

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。