实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery幻灯片插件Owl Carousel演示-进度条</title>
<style>
#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;}
</style>
        <link href="/api/jq/5733e359e0d42/css/owl.carousel.css" rel="stylesheet">
        <link href="/api/jq/5733e359e0d42/css/owl.theme.css" rel="stylesheet">
        <script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
        <script src="/api/jq/5733e359e0d42/js/owl.carousel.js"></script>
<script>
$(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;
	});
});
</script>
</head>

​x
 
•<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery幻灯片插件Owl Carousel演示-进度条</title>
<style>
#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;}
</style>
        <link href="/api/jq/5733e359e0d42/css/owl.carousel.css" rel="stylesheet">
        <link href="/api/jq/5733e359e0d42/css/owl.theme.css" rel="stylesheet">
        <script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
        <script src="/api/jq/5733e359e0d42/js/owl.carousel.js"></script>
<script>
$(function(){
    var time = 7;   //进度条时间，以秒为单位，越小越快
​
    var $progressBar, $bar, $elem, isPause, tick, percentTime;
​