实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
•<!DOCTYPE html>
2
<html lang="zh-CN">
3
    <head>
4
        <meta charset="utf-8">
5
        <title>jQuery幻灯片插件Orbit演示2_sucaihuo</title>
6
        <link rel="stylesheet" href="/api/jq/5733e3599b72e/css/orbit-thumbs.css">
7
    </head>
8
    <body>
9
        <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件Orbit演示2</h1>
10
        <div class="wrap" style="width: 565px; height: 290px; margin: 0 auto; padding-bottom: 58px;">
11
            <div id="featured">
12
                <img src="/api/jq/5733e3599b72e/images/img1.jpg" alt="/api/jq/5733e3599b72e/img1" data-thumb="img1-thumb.jpg">
13
                <img src="/api/jq/5733e3599b72e/images/img2.jpg" alt="/api/jq/5733e3599b72e/img2" data-thumb="img2-thumb.jpg">
14
                <img src="/api/jq/5733e3599b72e/images/img3.jpg" alt="/api/jq/5733e3599b72e/img3" data-thumb="img3-thumb.jpg">
15
                <img src="/api/jq/5733e3599b72e/images/img4.jpg" alt="/api/jq/5733e3599b72e/img4" data-thumb="img4-thumb.jpg">
16
                <img src="/api/jq/5733e3599b72e/images/img2.jpg" alt="/api/jq/5733e3599b72e/img2" data-thumb="img2-thumb.jpg">
17
            </div>
18
        </div>
19
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
20
        <script src="/api/jq/5733e3599b72e/js/jquery.orbit.min.js"></script>
21
        <script>
22
            $(window).load(function() {
23
                $('#featured').orbit({
24
                    'bullets': true,
25
                    'bulletThumbs': true,
26
                    'bulletThumbLocation': '/api/jq/5733e3599b72e/images/'
27
                });
28
            });
29
        </script>
30
    </body>
31
</html>