jQuery orbit 幻灯片

在线实例

默认

带缩略图

带描述

使用方法

1. <div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;">
2.     <div id="featured">
3.         <a class="orbit-item" href="#" data-caption="#htmlCaption1"><img src="images/img1.jpg" alt="img1"></a>
4.         <img src="images/img4.jpg" alt="img4" data-caption="#htmlCaption5">
5.         <a href="#"><img src="images/img2.jpg" alt="img2"></a>
6.         <div class="orbit-item" style="background-color: #eee; text-align: center; line-height: 290px;">这是一个空的div，可以放 html代码、视频等等</div>
7.         <a href="#" data-caption="#htmlCaption3"><img src="images/img3.jpg" alt="img3"></a>
8.     </div>
9.     <span class="orbit-caption" id="htmlCaption1">这是幻灯片<strong>1</strong>的标题</span>
10.     <span class="orbit-caption" id="htmlCaption3">这是蝙蝠侠吗？</span>
11.     <span class="orbit-caption" id="htmlCaption5">没有链接的幻灯片</span>
12. </div>
13. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
14. <script src="js/jquery.orbit.min.js"></script>
15. <script>
16. $(window).load(function() {
17.     $('#featured').orbit({
18.         'bullets' : true,
19.         'captionAnimation' : 'slideOpen'
20.     });
21. });
22. </script>

复制

---

下载