封装轮播图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'));