特效介绍

模仿新浪影视,基于
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:// 5.jimth.com" data-caption="#htmlCaption1"><img src="images/img1.jpg" alt="img1"></a>
<a class="orbit-item" href="http:// 5.jimth.com" data-caption="#htmlCaption2"><img src="images/img2.jpg" alt="img1"></a>
<a class="orbit-item" href="http:// 5.jimth.com" data-caption="#htmlCaption3"><img src="images/img3.jpg" alt="img1"></a>
<a class="orbit-item" href="http:// 5.jimth.com" 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 | 幻灯片切换后的回调函数 | 空 |
