实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!doctype html>
2
<html lang="zh">
3
    <head>
4
        <meta charset="UTF-8">
5
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
6
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
        <title>fsBanner演示6种不同的响应式手风琴效果</title>
8
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e3274eeaa/css/default.css">
9
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e3274eeaa/css/fsbanner.css">
10
        <style type="text/css">
11
            .ex{
12
                width: 800px;
13
                margin:0 auto;
14
            }
15
            .fsbanner{margin-top: 10px;}
16
        </style>
17
        <!--[if IE]>
18
                <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
19
        <![endif]-->
20
    </head>
21
    <body>
22
        <article class="container">
23
            <div class='ex' name='1'>
24
                <h1>默认</h1>
25
                <div class='fsbanner' >
26
                    <div style='background-image:url(/api/jq/5733e3274eeaa/images/black.jpg)'></div>
27
                    <div style='background-image:url(/api/jq/5733e3274eeaa/images/brown.jpg)'></div>
28
                    <div style='background-image:url(/api/jq/5733e3274eeaa/images/panda.jpg)'></div>
29
                    <div style='background-image:url(/api/jq/5733e3274eeaa/images/polar.jpg)'></div>
30
                </div>
31
            </div>
32
        </article>
33
        <script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
34
        <script type="text/javascript" src="/api/jq/5733e3274eeaa/js/fsbanner.js"></script>
35
        <script type="text/javascript">
36
            $(function() {
37
                $('.fsbanner').fsBanner();
38
            });
39
        </script>
40
    </body>
41
</html>