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

来源:https://www.sucaihuo.com/js/237.html 2015-08-21 01:21浏览(829) 收藏

Orbit是一个jQuery图片滑动幻灯片插件,它除了支持图片滚动切换展示外,还支持针对内容的滚动。插件的定制性相当高,它提供了多个参数的设置,通过设置你可以将它打造成完全符合你要求的样式。
jQuery+Orbit实现电影幻灯片效果
分类:图片代码 > 图片轮播 难易:中级
查看演示 下载资源: 140 下载资源 下载积分: 20 积分

HTML

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

<div id="featured">
        <a class="orbit-item" href="http://www.sucaihuo.com/" data-caption="#htmlCaption1"><img src="images/img1.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaihuo.com/js/237.html" data-caption="#htmlCaption2"><img src="images/img2.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaihuo.com/58.html" data-caption="#htmlCaption3"><img src="images/img3.jpg" alt="img1"></a>
        <a class="orbit-item" href="http://www.sucaihuo.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.sucaihuo.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 停止旋转
评论1
头像

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

  • 头像 沙发
    09-09 09:54
    孤***3
    能改成宽屏的就最好了饿了
1 2