![[代码样式]用Orbit制作新浪电影频道2013版幻灯片](https://www.weimahe.com/wp-content/uploads/2020/08/oNQImA1556.jpg "[代码样式]用Orbit制作新浪电影频道2013版幻灯片")
简介
今天我们介绍如何使用 jQuery 幻灯片插件 Orbit 制作新浪电影频道2013版幻灯片，制作之前你可以先了解一下 Orbit，以便更好的制作。制作出的效果几乎与原版一致，不同的是原版底部的点点导航是鼠标移上去切换，这里的是点击切换。
兼容性
兼容所有浏览器，包括 IE6。
制作方法
1、引入文件
<script src="https://www.dowebok.com/js/jquery.min.js"></script> <script src="https://www.dowebok.com/js/jquery.orbit.min.js"></script>
2、HTML
<div id="featured"> <a class="orbit-item" href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-caption="#htmlCaption1"> <img src="https://www.dowebok.com/images/img1.jpg" alt="img1"> </a> <a class="orbit-item" href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-caption="#htmlCaption2"> <img src="https://www.dowebok.com/images/img2.jpg" alt="img1"> </a> <a class="orbit-item" href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-caption="#htmlCaption3"> <img src="https://www.dowebok.com/images/img3.jpg" alt="img1"> </a> <a class="orbit-item" href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-caption="#htmlCaption4"> <img src="https://www.dowebok.com/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 默认有一个定时器（如本例右上角），可以通过配置参数不显示，但去掉后幻灯片就不会自动播放了。所以最好不要去掉，如果真的不想要，可以用样式隐藏。
[b2_file link="
百度网盘" name="用Orbit制作新浪电影频道2013版幻灯片" pass="" code=""]
