实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
•<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
<meta charset="utf-8">
5
<title>jQuery幻灯片插件Owl Carousel演示-自动播放</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: true
20
    });
21
});
22
</script>
23
</head>
24
​
25
<body>
26
<div class="main">
27
    <div class="mianc">
28
        <h1>自动播放</h1>
29
​
30
        <!-- Demo -->
31
        <div id="owl-demo" class="owl-carousel">
32
            <a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage1.jpg" alt=""></a>
33
            <a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage2.jpg" alt=""></a>
34
            <a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage3.jpg" alt=""></a>
35
            <a class="item"><img src="/api/jq/5733e359e0d42/img/fullimage4.jpg" alt=""></a>
36
        </div>
37
        <!-- Demo end -->
38
    </div>
39
</div>
40
</body>
41
</html>