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

收藏

之前我们介绍了Orbit焦点轮播演示，今天继续演示漂亮的幻灯片效果，及增加了它的调用API。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

orbit有以下特点

• 标签简单
• 支持淡入淡出和水平/垂直滚动切换
• 支持计时器
• 支持左右箭头导航及项目导航
• 支持显示初图片外的其他内容，如 HTML、视频等（ 演示 ）
• 支持缩略图（ 演示 ）

首先引入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.erdangjiade.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.erdangjiade.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.erdangjiade.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'
	});
});