实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
<meta charset="utf-8">
5
<title>jQuery幻灯片插件Orbit演示3_sucaihuo</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演示3</h1>
10
<div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;">
11
    <div id="featured">
12
        <a class="orbit-item" href="#" data-caption="#htmlCaption1"><img src="/api/jq/5733e3599b72e/images/img1.jpg" alt="/api/jq/5733e3599b72e/img1"></a>
13
        <img src="/api/jq/5733e3599b72e/images/img4.jpg" alt="/api/jq/5733e3599b72e/img4" data-caption="#htmlCaption5">
14
        <a href="#"><img src="/api/jq/5733e3599b72e/images/img2.jpg" alt="/api/jq/5733e3599b72e/img2"></a>
15
        <div class="orbit-item" style="background-color: #eee; text-align: center; line-height: 290px;">这是一个空的div，可以放 html代码、视频等等</div>
16
        <a href="#" data-caption="#htmlCaption3"><img src="/api/jq/5733e3599b72e/images/img3.jpg" alt="/api/jq/5733e3599b72e/img3"></a>
17
    </div>
18
    <span class="orbit-caption" id="htmlCaption1">这是幻灯片<strong>1</strong>的标题</span>
19
    <span class="orbit-caption" id="htmlCaption3">这是蝙蝠侠吗？</span>
20
    <span class="orbit-caption" id="htmlCaption5">没有链接的幻灯片</span>
21
</div>
22
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
23
<script src="/api/jq/5733e3599b72e/js/jquery.orbit.min.js"></script>
24
<script>
25
$(window).load(function() {
26
    $('#featured').orbit({
27
        'bullets' : true,
28
        'captionAnimation' : 'slideOpen'
29
    });
30
});
31
</script>
32
</body>
33
</html>