封装轮播图jq

　封装轮播图（pc端）

function banAnimate (target) {
    // 获取元素
    var banner_items = target.children('ul').children();
    var banner_control = target.children('ol');
    var banner_control_items = banner_control.children();
    var all_len = banner_control.children().length;
    // 鼠标移动动画
    banner_control_items.mouseover(function() {
        var index = $(this).index();
        banChange(index);
    })
    // 定时器动画
    var bannerTimer = null, currentIndex = 0;
    bannerTimer = setInterval(function () {
        currentIndex = ++currentIndex > all_len-1 ? 0 : currentIndex;
        banChange(currentIndex)
    }, 2000)
    function banChange (index) {
        banner_items.eq(index).show().siblings().hide();
        banner_control_items.eq(index).addClass('active').siblings().removeClass('active');
    }
    // 定时器动画停止、开启
    target.hover(function () {
        clearTimeout(bannerTimer);
    }, function () {
        bannerTimer = setInterval(function () {
            currentIndex = ++currentIndex > all_len - 1 ? 0 : currentIndex;
            banChange(currentIndex)
        }, 2000)
    })
}

HTML结构

    <div class="banner_pc">
        <!--轮播主体-->
        <ul></ul>
        <!--轮播控制-->
        <ol></ol>
    </div>

封装轮播图（移动端）

function banAnimateMobile (target) {
    // 获取元素
    var banner_wrapper = target.children('ul');
    var banner_control = target.children('ol');
    var banner_control_items = banner_control.children();
    var all_len = banner_control.children().length;

    // 定时器动画
    var bannerTimer = null,
    currentIndex = 0;
    controlIndex = 0;
    bannerTimer = setInterval(function () {
        currentIndex++;
        if (currentIndex > all_len) {
            banner_wrapper.css('marginLeft', 0);
            currentIndex = 1;
        }
        controlIndex = ++controlIndex > all_len - 1 ? 0 : controlIndex;
        banChange(currentIndex)
    }, 2000)

    function banChange(index) {
        banner_wrapper.animate({
            marginLeft: -index*16 + 'rem'
        }, 'fast')
        banner_control_items.eq(controlIndex).addClass('active').siblings().removeClass('active');
    }

    // 手指滑动动画 
    function slideAnimate() {
        var startX = 0;
        var endX = 0;
        target.on('touchstart', function (e) {
            //阻止其他事件
            e.preventDefault();
            //获取当前坐标
            if (e.originalEvent.changedTouches.length == 1) {
                var touch = e.originalEvent.changedTouches[0];
                startX = touch.screenX;
                console.log("startX"+startX)
            }
            //清除定时器  
            clearInterval(bannerTimer); 
        });
        target.on('touchmove', function (e) {
            //阻止其他事件
            e.preventDefault();
            //获取当前坐标
            if (e.originalEvent.changedTouches.length == 1) {
                var touch = e.originalEvent.changedTouches[0];
                endX = touch.screenX;
                console.log("endX" + endX)
            }
        });
        target.on('touchend', function (e) {
            console.log(endX+"----"+startX);
            if (endX > startX) {
                // 右滑
                --currentIndex;
                if (currentIndex < 0) {
                    banner_wrapper.css('marginLeft', -16*all_len + 'rem');
                    currentIndex = all_len-1;

                }
                controlIndex = --controlIndex < 0  ? all_len - 1 : controlIndex;
                banChange(currentIndex)
                console.log('右滑')

            } else {
                //左滑
                // sceneIndex = sceneIndex >= sceneBuilders.length - 1 ? sceneBuilders.length - 1 : sceneIndex + 1;
                // console.log(sceneIndex);
                console.log('左滑');
                currentIndex++;
                if (currentIndex > all_len) {
                    banner_wrapper.css('marginLeft', 0);
                    currentIndex = 1;
                }
                controlIndex = ++controlIndex > all_len - 1 ? 0 : controlIndex;
                banChange(currentIndex)
            }
            // 开启定时器
            bannerTimer = setInterval(function () {
                currentIndex++;
                if (currentIndex > all_len) {
                    banner_wrapper.css('marginLeft', 0);
                    currentIndex = 1;
                }
                controlIndex = ++controlIndex > all_len - 1 ? 0 : controlIndex;
                banChange(currentIndex)
            }, 2000)
        });
    }
    slideAnimate();
}
banAnimateMobile($('.banner-mobile'));