实例代码 - 手册网

实例代码“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%;}
</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(){
	$('#owl-demo').owlCarousel({
		items: 1
	});

//或者
	/*
	$('#owl-demo').owlCarousel({
		singleItem: true
	});
	*/
});
</script>
</head>

<div id="owl-demo" class="owl-carousel">
			<a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage1.jpg" alt=""></a>
			<a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage2.jpg" alt=""></a>
			<a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage3.jpg" alt=""></a>
			<a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage4.jpg" alt=""></a>
			<a class="item" href="#"><img src="/api/jq/5733e359e0d42/img/fullimage5.jpg" alt=""></a>
		</div>
		
	</div>
</div>
</body>
</html>

​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%;}
</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(){
    $('#owl-demo').owlCarousel({
        items: 1
    });
​
    //或者
    /*