基于Orbit的js滚动插件

模仿新浪影视，基于jquery.orbit.js的图片轮播插件，和FlexSlider滚动有点类似，带标题和左右箭头以及加载动画，以及圆形计时器进度条，支持淡入淡出和水平/垂直滚动切换，此外，它还支持显示HTML、视频等内容。虽然本插件已经停止更新，但是用起来还是不错的。 1、引入jQuery库和jquery.orbit.min.js文件

<link rel="stylesheet" href="css/orbit-thumbs.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.orbit.min.js"></script>

2、在您的banner处添加下面的代码

<div id="featured">
    <a class="orbit-item" href="http:// www.5imoban.net" data-caption="#htmlCaption1"><img src="images/img1.jpg" alt="img1"></a>
    <a class="orbit-item" href="http:// www.5imoban.net" data-caption="#htmlCaption2"><img src="images/img2.jpg" alt="img1"></a>
    <a class="orbit-item" href="http:// www.5imoban.net" data-caption="#htmlCaption3"><img src="images/img3.jpg" alt="img1"></a>
    <a class="orbit-item" href="http:// www.5imoban.net" 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>

注意标题和图片的对应关系，最好在上面的html外面套个标签，这样看起来更加明了。

3、调用orbit滚动插件

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

4、更多参数：

参数	说明	默认值
animation	幻灯片切换方式，可选 fade（淡入淡出）、horizontal-slide, vertical-slide, horizontal-push、horizontal-push	fade
animationSpeed	幻灯片切换动画时间，单位为毫秒	800
timer	是否显示计时器	true
advanceSpeed	幻灯片切换间隔，单位为毫秒	4000
pauseOnHover	鼠标悬停在上面是否暂停	false
startClockOnMouseOut	点击导航后是否暂停计时器，直到鼠标移开	false
startClockOnMouseOutAfter	与 startClockOnMouseOut 配合使用，鼠标移开后多久开始计时，单位为毫秒	1000
directionalNav	是否显示左右方向导航	true
captions	是否显示标题	true
captionAnimation	标题显示动画方式，可选 fade（淡入淡出）、slideOpen、none，需要 captions 为 true	fade
captionAnimationSpeed	标题动画时间，单位为毫秒	800
bullets	是否显示项目导航	false
bulletThumbs	是否显示缩略图，需要 bullets 为 true	false
bulletThumbLocation	缩略图的文件地址	空
afterSlideChange	幻灯片切换后的回调函数	空