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

收藏

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

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

查看演示

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

下载资源 下载积分： 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'
    });
});