Orbit演示jQuery三种不同的幻灯片效果

来源:https://www.sucaihuo.com/js/242.html 2015-08-20 11:12浏览(1449) 收藏

之前我们介绍了Orbit焦点轮播演示,今天继续演示漂亮的幻灯片效果,及增加了它的调用API。
Orbit演示jQuery三种不同的幻灯片效果
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

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 幻灯片切换后的回调函数 -
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2