之前我们介绍了Orbit焦点轮播演示,今天继续演示漂亮的幻灯片效果,及增加了它的调用API。
orbit有以下特点
<ul class='ul_demo'> <li>标签简单</li> <li>支持淡入淡出和水平/垂直滚动切换</li> <li>支持计时器</li> <li>支持左右箭头导航及项目导航</li> <li> 支持显示初图片外的其他内容,如 HTML、视频等( <a target="_blank" href="http://www.sucaihuo.com/jquery/demo/2/242/index_3.html" title="jQuery幻灯片插件Orbit演示3">演示</a> ) </li> <li> 支持缩略图( <a target="_blank" href="http://www.sucaihuo.com/jquery/demo/2/242/index_2.html">演示</a> ) </li> </ul>
首先引入jquery.js和jquery.orbit.min.js
<script src="jquery.js"></script>
<script src="js/jquery.orbit.min.js"></script>
演示一:无链接图片+标题
<div class="wrap" style="width: 565px; height: 290px; margin: 0 auto; padding-bottom: 58px;">
<div id="featured">
<img src="images/img1.jpg" alt="img1" data-thumb="img1-thumb.jpg">
<img src="images/img2.jpg" alt="img2" data-thumb="img2-thumb.jpg">
<img src="images/img3.jpg" alt="img3" data-thumb="img3-thumb.jpg">
<img src="images/img4.jpg" alt="img4" data-thumb="img4-thumb.jpg">
<img src="images/img2.jpg" alt="img2" data-thumb="img2-thumb.jpg">
</div>
</div>
$(window).load(function() {
$('#featured').orbit({
'bullets': true
});
});
演示二:带缩略图,html代码同演示一HTML
$(window).load(function() {
$('#featured').orbit({
'bullets': true,
'bulletThumbs': true,
'bulletThumbLocation': 'images/'
});
});
演示三:混合内容
<div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;">
<div id="featured">
<a class="orbit-item" href="http://www.sucaihuo.com/" data-caption="#htmlCaption1">
<img src="images/img1.jpg" alt="img1">
</a>
<img src="images/img4.jpg" alt="img4" data-caption="#htmlCaption5">
<a href="http://www.sucaihuo.com/js/242.html">
<img src="images/img2.jpg" alt="img2">
</a>
<div class="orbit-item" style="background-color: #eee; text-align: center; line-height: 290px;">
这是一个空的div,可以放 html代码、视频等等
</div>
<a href="http://www.sucaihuo.com/code" data-caption="#htmlCaption3">
<img src="images/img3.jpg" alt="img3">
</a>
</div>
<span class="orbit-caption" id="htmlCaption1">
这是幻灯片
<strong>
1
</strong>
的标题
</span>
<span class="orbit-caption" id="htmlCaption3">
这是蝙蝠侠吗?
</span>
<span class="orbit-caption" id="htmlCaption5">
没有链接的幻灯片
</span>
</div>
$(window).load(function() {
$('#featured').orbit({
'bullets' : true,
'captionAnimation' : 'slideOpen'
});
});
参数 | 描述 | 默认值 |
animation | 幻灯片切换方式,可选 fade(淡入淡出)、horizontal-slide, vertical-slide, horizontal-push、horizontal-push | fade |
animationSpeed | 幻灯片切换动画时间,单位为毫秒 | 800 |
timer | 是否显示计时器 | true |
advanceSpeed | 幻灯片切换间隔,单位为毫秒 | 4000 |
pauseOnHover | 鼠标悬停在上面是否暂停 | false |
startClockOnMouseOut | 与 startClockOnMouseOut 配合使用,鼠标移开后多久开始计时,单位为毫秒 | startClockOnMouseOutAfter |
directionalNav | 是否显示左右方向导航 | true |
captions | 标题动画时间,单位为毫秒 | true |
captionAnimation | 标题显示动画方式,可选 fade(淡入淡出)、slideOpen、none,需要 captions 为 true | fade |
captionAnimationSpeed | 标题动画时间,单位为毫秒 | 800 |
bullets | 是否显示项目导航 | false |
bulletThumbs | 是否显示缩略图,需要 bullets 为 true | false |
bulletThumbLocation | 缩略图的文件地址 | - |
afterSlideChange | 幻灯片切换后的回调函数 | - |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791