用Orbit制作新浪电影频道2013版幻灯片

演 示 下 载

简介

今天我们介绍如何使用 jQuery 幻灯片插件 Orbit 制作新浪电影频道2013版幻灯片，制作之前你可以先了解一下 Orbit，以便更好的制作。制作出的效果几乎与原版一致，不同的是原版底部的点点导航是鼠标移上去切换，这里的是点击切换。

兼容性

兼容所有浏览器，包括 IE6。

制作方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.orbit.min.js"></script>

2、HTML

<div id="featured">
    <a class="orbit-item" href="###" data-caption="#htmlCaption1">
        <img src="images/img1.jpg" alt="img1">
    </a>
    <a class="orbit-item" href="###" data-caption="#htmlCaption2">
        <img src="images/img2.jpg" alt="img1">
    </a>
    <a class="orbit-item" href="###" data-caption="#htmlCaption3">
        <img src="images/img3.jpg" alt="img1">
    </a>
    <a class="orbit-item" href="###" 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>

data-caption 的属性值与 class=”orbit-caption” 的 id 对应，是用来做标题的。

3、CSS

.orbit-wrapper {
    position:relative;
    margin:0 auto
}
#featured {
    position:relative;
    width:565px;
    height:290px;
    overflow:hidden;
    background:#fff url(../images/loading.gif) 50% no-repeat;
}
.orbit > img {
    display:none;
    position:absolute;
    top:0;
    left:0;
    border:0 none
}
.orbit > a {
    display:none;
    position:absolute;
    top:0;
    left:0;
    line-height:0;
    border:0 none
}
.orbit > div {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.orbit-item {
    background-color:#f5f5f5;
}
/* 标题 */
.orbit-caption {
    display:none;
    position:absolute;
    left:0;
    bottom:0;
    z-index:10;
    width:100%;
    height:75px;
    font:20px/50px "Microsoft Yahei";
    text-align:center;
    color:#fff;
    background:rgba(0,0,0,.6);
}
/* 导航 */
.orbit-bullets {
    position:absolute;
    z-index:1000;
    list-style:none;
    bottom:0px;
    left:50%;
    margin:15px 0 15px -50px;
    padding:0
}
.orbit-bullets li {
    float:left;
    margin:0 5px;
    cursor:pointer;
    width:10px;
    height:10px;
    overflow:hidden;
    text-indent:-9999px;
    background-color:#000;
}
.orbit-bullets li.active {
    background-color:#49CFF1;
}
.orbit-bullets li.has-thumb {
    background:none;
    width:100px;
    height:75px
}
.orbit-bullets li.active.has-thumb {
    background-position:0 0;
    border-top:2px solid #000
}
.slider-nav {
    display:block
}
.slider-nav span {
    width:75px;
    height:75px;
    text-indent:-9999px;
    position:absolute;
    z-index:1000;
    bottom:0;
    cursor:pointer
}
.slider-nav span.right {
    background:url(../images/arrow.png)  right 0;
    right:0
}
.slider-nav span.left {
    background:url(../images/arrow.png) 0 0;
    left:0
}
.slider-nav span.right:hover {
    background-position:right bottom;
}
.slider-nav span.left:hover {
    background-position:0 bottom;
}
/* 定时器 */
.timer {
    width:40px;
    height:40px;
    overflow:hidden;
    position:absolute;
    top:10px;
    right:10px;
    opacity:.6;
    cursor:pointer;
    z-index:1001
}
.rotator {
    display:block;
    width:40px;
    height:40px;
    position:absolute;
    top:0;
    left:-20px;
    background:url(../images/rotator-black.png) no-repeat;
    z-index:3
}
.mask {
    display:block;
    width:20px;
    height:40px;
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    overflow:hidden
}
.rotator.move {
    left:0
}
.mask.move {
    width:40px;
    left:0;
    background:url(../images/timer-black.png) repeat 0 0
}
.pause {
    display:block;
    width:40px;
    height:40px;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/pause-black.png) no-repeat;
    z-index:4;
    opacity:0
}
.pause.active {
    background:url(../images/pause-black.png) no-repeat 0 -40px
}
.timer:hover span.pause,span.pause.active {
    opacity:1
}

4、JavaScript

$(window).load(function() {
    $('#featured').orbit({
        bullets : true,
        startClockOnMouseOut : true,
        captionAnimation : 'slideOpen'
    });
});

Orbit 默认有一个定时器（如本例右上角），可以通过配置参数不显示，但去掉后幻灯片就不会自动播放了。所以最好不要去掉，如果真的不想要，可以用样式隐藏。