实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
•<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
<meta charset="utf-8">
5
<title>Document</title>
6
<style>
7
#owl-demo { width: 900px; margin-left: auto; margin-right: auto;}
8
#owl-demo .item{ display: block;}
9
#owl-demo img { display: block; width: 100%;}
10
</style>
11
        <link href="/api/jq/5733e359e0d42/css/owl.carousel.css" rel="stylesheet">
12
        <link href="/api/jq/5733e359e0d42/css/owl.theme.css" rel="stylesheet">
13
        <script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
14
        <script src="/api/jq/5733e359e0d42/js/owl.carousel.js"></script>
15
<script>
16
$(function(){
17
    $('#owl-demo').owlCarousel({
18
        items: 1,
19
        autoPlay: 3000,
20
        autoHeight: true,
21
        transitionStyle: 'fade'
22
    });
23
});
24
</script>
25
</head>
26
​
27
<body>
28
<div class="main">
29
    <div class="mianc">
30
        <h1>自适应高度</h1>
31
        <!-- Demo -->
32
        <div id="owl-demo" class="owl-carousel">
33
            <a class="item"><img src="/api/jq/5733e359e0d42/img/900x300.png" alt=""></a>
34
            <a class="item"><img src="/api/jq/5733e359e0d42/img/900x500.png" alt=""></a>
35
            <a class="item"><img src="/api/jq/5733e359e0d42/img/900x200.png" alt=""></a>
36
        </div>
37
        <!-- Demo end -->
38
    </div>
39
</div>
40
</body>
41
</html>