jQuery+Orbit实现电影幻灯片效果

HTML

首先我们在#featured放置多张图片，并且在其外面加上标题

<div id="featured">
        <a class="orbit-item" href="http://www.sucaihuo.com/" data-caption="#htmlCaption1"><img src="images/img1.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaihuo.com/js/237.html" data-caption="#htmlCaption2"><img src="images/img2.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaihuo.com/58.html" data-caption="#htmlCaption3"><img src="images/img3.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaihuo.com/69.html" data-caption="#htmlCaption4"><img src="images/img4.jpg" alt="img1"></a>
    </div>
<span class="orbit-caption" id="htmlCaption1">3D《海底大冒险》将映 打响海底保卫战</span>
<span class="orbit-caption" id="htmlCaption2">《私人》曝纪录片 章子怡：羡慕嫉妒恨</span>
<span class="orbit-caption" id="htmlCaption3">赵又廷林更新戏里有情 跟高圆圆没分手</span>
<span class="orbit-caption" id="htmlCaption4">柯震东回归《小时代3》 与郭采洁合体</span>

引入jQuery库和orbit.js

<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery.orbit.min.js"></script>

jQuery

$(window).load(function() {
    $('#featured').orbit({
        bullets: true,
        startClockOnMouseOut: true,
        captionAnimation: 'slideOpen'
    });
});