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

Orbit是一个jQuery图片滑动幻灯片插件，它除了支持图片滚动切换展示外，还支持针对内容的滚动。插件的定制性相当高，它提供了多个参数的设置，通过设置你可以将它打造成完全符合你要求的样式。

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图，在此特别感谢您对我们的支持与厚爱！

HTML

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

<div id="featured">
        <a class="orbit-item" href="http://www.sucaiq.com/" data-caption="#htmlCaption1"><img src="images/img1.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaiq.com/js/237.html" data-caption="#htmlCaption2"><img src="images/img2.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaiq.com/58.html" data-caption="#htmlCaption3"><img src="images/img3.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaiq.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.sucaiq.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'
    });
});