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