轮播显示进度条示例

#owl-demo {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#owl-demo .item {
    display: block;
}
#owl-demo img {
    display: block;
    width: 100%;
    border: 0 none;
}
#bar {
    width: 0%;
    max-width: 100%;
    height: 4px;
    background: #7fc242;
    overflow: hidden;
}
#progressBar {
    width: 100%;
    background: #ededed;
}

<div id="owl-demo" class="owl-carousel">
    <a class="item"><img src="img/fullimage1.jpg" alt=""></a>
    <a class="item"><img src="img/fullimage2.jpg" alt=""></a>
    <a class="item"><img src="img/fullimage3.jpg" alt=""></a>
    <a class="item"><img src="img/fullimage4.jpg" alt=""></a>
    <a class="item"><img src="img/fullimage5.jpg" alt=""></a>
</div>

$(function(){
    var time = 7;    //进度条时间，以秒为单位，越小越快

    var $progressBar, $bar, $elem, isPause, tick, percentTime;

    $('#owl-demo').owlCarousel({
        slideSpeed: 500,
        paginationSpeed: 500,
        singleItem: true,
        afterInit: progressBar,
        afterMove: moved,
        startDragging: pauseOnDragging
    });

    function progressBar(elem){
        $elem = elem;
        buildProgressBar();
        start();
    }

    function buildProgressBar(){
        $progressBar = $('<div>',{
            id:'progressBar'
        });
        $bar = $('<div>',{
            id:'bar'
        });
        $progressBar.append($bar).insertAfter($elem.children().eq(0));
    }

    function start(){
        percentTime = 0;
        isPause = false;
        tick = setInterval(interval, 10);
    }

    function interval(){
        if(isPause === false){
            percentTime += 1 / time;
            $bar.css({
                width: percentTime+'%'
            });
            if(percentTime >= 100){
                $elem.trigger('owl.next')
            }
        }
    }

    function pauseOnDragging(){
        isPause = true;
    }

    function moved(){
        clearTimeout(tick);
        start();
    }

    $elem.on('mouseover',function(){
        isPause = true;
    })

    $elem.on('mouseout',function(){
        isPause = false;
    });
});