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

jQuery+Orbit实现电影幻灯片效果

来源:http://www.erdangjiade.com/ 二当家的 2015-08-21 01:21浏览(1476)

Orbit是一个jQuery图片滑动幻灯片插件,它除了支持图片滚动切换展示外,还支持针对内容的滚动。插件的定制性相当高,它提供了多个参数的设置,通过设置你可以将它打造成完全符合你要求的样式。

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

jQuery+Orbit实现电影幻灯片效果
分类:图片代码 > 图片轮播 难易:中级
查看演示 下载资源: 106

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

下载资源 下载积分: 30 积分

HTML

首先我们在#featured放置多张图片,并且在其外面加上标题

<div id="featured">
        <a class="orbit-item" href="http://www.erdangjiade.com/" data-caption="#htmlCaption1"><img src="images/img1.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.erdangjiade.com/js/237.html" data-caption="#htmlCaption2"><img src="images/img2.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.erdangjiade.com/58.html" data-caption="#htmlCaption3"><img src="images/img3.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.erdangjiade.com/69.html" 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>

引入jQuery库和orbit.js

<script src="http://www.erdangjiade.com/Public/js/other/jquery.js"></script>
<script src="js/jquery.orbit.min.js"></script>

jQuery

$(window).load(function() {
    $('#featured').orbit({
        bullets: true,
        startClockOnMouseOut: true,
        captionAnimation: 'slideOpen'
    });
});
参数 描述 默认值
angle 0 旋转一个角度
animateTo 0 从当前的角度旋转到多少度
step 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
easing 自定义旋转速度、旋转效果,需要使用 jQuery.easing.js

duration

callback 旋转完成后的回调函数
getRotateAngle 返回旋转对象当前的角度
stopRotate 停止旋转
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/237.html
评论2
头像

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

  • 头像 椅子
    01-21 08:42
    qqlixiangabc
    电影幻灯片效果哦666
  • 头像 沙发
    10-26 09:16
    qq562140910
    积分,赞积分<br />
1 2