[代码样式]用Orbit制作新浪电影频道2013版幻灯片

[代码样式]用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="###" data-caption="#htmlCaption1">
        <img src="https://www.dowebok.com/images/img1.jpg" alt="img1">
    </a>
    <a class="orbit-item" href="###" data-caption="#htmlCaption2">
        <img src="https://www.dowebok.com/images/img2.jpg" alt="img1">
    </a>
    <a class="orbit-item" href="###" data-caption="#htmlCaption3">
        <img src="https://www.dowebok.com/images/img3.jpg" alt="img1">
    </a>
    <a class="orbit-item" href="###" 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 默认有一个定时器(如本例右上角),可以通过配置参数不显示,但去掉后幻灯片就不会自动播放了。所以最好不要去掉,如果真的不想要,可以用样式隐藏。

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]把WordPress的分类转换成标签

2020-10-27 14:47:21

脚本代码

[代码样式]用FlexSlider制作支付宝2013版幻灯片

2020-10-27 14:47:25

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索