最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-08-20 11:12浏览(1436)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

Orbit演示jQuery三种不同的幻灯片效果
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 106

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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'
	});
});
参数 描述 默认值
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 幻灯片切换后的回调函数 -
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/242.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2