基于fullpage的幻灯片播放
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,userscalabele=no" />
<title>fullpage demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.css" />
<style type="text/css">
body{
color:#fff;
}
.section01{
background: url("bg01.jpg");
}
.section02{
background: url("bg02.jpg") center ;
}
.section03{
background: orange;
}
.section04{
background: blue;
}
.slide{
text-align: center;
font-size: 30px;
}
#header{
background: black;
color:#fff;
font-size: 40px;
position: absolute;
top:;
left: 200px;
}
#fullpageMenu{
position: absolute;
bottom: 40px;
right: 40px;
z-index: ;
}
.lists{
list-style-type: none;
}
.lists li{
float: left;
width: %;
text-align: center;
}
.lists li img{
width: 150px;
height: 230px;
}
.mt{
margin-top: 800px;
text-align: center;
}
.big-to-small{
text-align: center;
}
.section02 h1{
color: black;
}
.section03 h1{
margin-left: -800px;
}
.section03 p{
margin-left: 800px;
text-align: center;
}
</style>
</head>
<body>
<!-- <ul id="fullpageMenu">
<li data-menuanchor="page01"><a href="#page01">page01</a></li>
<li data-menuanchor="page02"><a href="#page02">page02</a></li>
<li data-menuanchor="page03"><a href="#page03">page03</a></li>
<li data-menuanchor="page04"><a href="#page04">page04</a></li>
</ul> -->
<div id="header">header</div>
<div id="fullpage">
<div class="section section01">
<h1 class="big-to-small">它，终于来了</h1>
<p class="mt">为了充分发挥体积小巧为了充分发挥体积小巧为了充分发挥体积小巧为了充分发挥体积小巧为了充分发挥体积小巧</p>
</div>
<!-- <div class="section section02">
<div class="slide">slide01</div>
<div class="slide">slide02</div>
<div class="slide">slide03</div>
<div class="slide">slide04</div>
</div> -->
<div class="section section02">
<h1 class="big-to-small">真正与你贴近的个人设备</h1>
</div>
<div class="section section03">
<h1 class="big-to-small">非同一般的精准计时</h1>
<p>高级手表向来以精准为本高级手表向来以精准为本高级手表向来以精准为本</p>
</div>
<div class="section section04">
<ul class="lists">
<li>
<span><img src="1.jpg" class="img01"/></span>
<p class="text01">手机1手机1手机1手机1手机1</p>
</li>
<li>
<span><img src="2.jpg" class="img02"/></span>
<p class="text02">手机1手机1手机1手机1手机1</p>
</li>
<li>
<span><img src="3.jpg" class="img03"/></span>
<p class="text03">手机1手机1手机1手机1手机1</p>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.2/jquery.fullPage.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.min.js"></script>
<script type="text/javascript">
$(function(){
$("#fullpage").fullpage({
//sectionsColor:['green','red','orange','blue'],
//controlArrows:false,
//verticalCentered:false,
//resize:true,
//scrollingSpeed:700
anchors:['page01','page02','page03','page04'],
//lockAnchors:false
//continuousVertical:true,
//fixedElements:"#header",
//menu:"#fullpageMenu"
navigation:true,
navigationPosition:'right',
navigationTooltips:['page01','page02','page03','page04'],
//showActiveTooltip:true,
//slidesNavigation:true,
//slidesNavPosition:'bottom'
//scrollOverflow:false
afterLoad:function(link,index){
switch(index){
case :
move('.section01 h1').scale(1.5).end();
move('.section01 p').set('margin-top','5%').end();
break;
case :
move('.section02 h1').scale(0.7).end();
break;
case :
move('.section03 h1').set('margin-left','2%').end();
move('.section03 p').set('margin-left','8%').end();
break;
case :
move('.section04 .img01').rotate().end(function(){
move('.section04 .img02').rotate().end(function(){
move('.section04 .img03').rotate().end(function(){
move('.section04 .text01').scale(1.3).end(function(){
move('.section04 .text02').scale(1.3).end(function(){
move('.section04 .text03').scale(1.3).end();
})
})
})
});
});
break;
default:
break;
}
},
onLeave:function(link,index){
switch(index){
case :
move('.section01 h1').scale().end();
move('.section01 p').set('margin-top','800px').end();
break;
case :
move('.section02 h1').scale().end();
break;
case :
move('.section03 h1').set('margin-left','-800px').end();
move('.section03 p').set('margin-left','800px').end();
break;
case :
move('.section04 .img01').rotate(-).end()
move('.section04 .img02').rotate(-).end()
move('.section04 .img03').rotate(-).end()
move('.section04 .text01').scale().end()
move('.section04 .text02').scale().end()
move('.section04 .text03').scale().end();
break;
default:
break;
}
},
afterRender:function(link,index){
switch(index){
case :
break;
case :
break;
case :
break;
case :
break;
default:
break;
}
}
});
});
</script>
</body>
</html>
配置项介绍：
基于fullpage的幻灯片播放的更多相关文章
- 基于fullpage的自动播放，手动播放，暂停页面的功能
功能如下: 1.默认加载方式为“自动播放 ”方式,即从第1屏至第5屏 页面循环加载显示,每屏每次仅显示1个页面,页面间停留时间为“10”秒2.手动播放过程中,按数字键“1”-“5”,将直接切到指定页面 ...
- 一款炫酷的幻灯片播放框架介绍（附demo及使用方法）
废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介 官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...
- Camera 幻灯片播放
Camera 幻灯片播放与轮播有些类似,不同的是在camera 幻灯片播放时有很多很炫很酷的播放效果 : 简单的介绍Camera 插件的使用方式: 1.引入js: <script src=&qu ...
- js实现幻灯片播放图片示例代码
幻灯片播放图片的效果想必大家都有见到过吧,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: <select id="img_date" style=" ...
- 基于ffmpeg的C++播放器1
基于ffmpeg的C++播放器 (1) 2011年12月份的时候发了这篇博客 http://blog.csdn.net/qq316293804/article/details/7107049 ,博文最 ...
- 基于FFMPEG的跨平台播放器实现(二)
基于FFMPEG的跨平台播放器实现(二) 上一节讲到了在Android平台下采用FFmpeg+surface组合打造播放器的方法,这一节讲一下Windows平台FFmpeg + D3D.Linux平台 ...
- 基于FFMPEG的跨平台播放器实现
基于FFMPEG的跨平台播放器实现 一.背景介绍 FFmpeg是一款超级强大的开源多媒体编解码框架,提供了录制.转换以及流化音视频的完整解决方案,包含了libavcodec.libavformat等多 ...
- 实现ppt幻灯片播放倒计时
需求:为控制会议时间,采取ppt幻灯片播放倒计时的办法,倒计时5分钟. 分析:用EnumWindows枚举窗口,发现PPT窗口类名有三种:PP12FrameClass.MS-SDIb.screenCl ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
随机推荐
- QList内存释放（看它内部存储的是否是Object，另外还有qDeleteAll）
QList<T> 的释放分两种情况: 1.T的类型为非指针,这时候直接调用clear()方法就可以释放了,看如下测试代码 #include <QtCore/QCoreApplicat ...
- IE中的fireEvent和webkit中的dispatchEvent
拿浏览器的click事件来说: 在IE浏览器中如果一个element没有注册click事件,那么直接调用的话会出现异常!当然如果你注册了没有什么可说的. 那么如果使用fireEvent来处理,clic ...
- MongoDB创建用户
1.在创建用户之前,我们首先应该启动mongodb的用户验证功能,否则建立用户是没有意义的! 2.使用 //这个123用户拥有test1数据库的数据库管理员权限,拥有test2数据库的读取权限 db. ...
- linux与linux,linux与windows之间用SSH传输文件
linux与linux,linux与windows之间用SSH传输文件linux与linux之间传送文件:scp file username@hostIP:文件地址 例: scp abc.txt ...
- Introducing shard translator
Introducing shard translator by Krutika Dhananjay on December 23, 2015 GlusterFS-3.7.0 saw the relea ...
- Swift-06-闭包
看完记不住,只好继续抄课文. 如果某个存储型属性的默认值需要特别的定制或者准备,就可以使用闭包或者全局函数来为其属性提供定制的默认值.每当某个属性所属的新类型实例创建时,对应的闭包或者函数会被调用,而 ...
- CFBundleVersion与CFBundleShortVersionString
CFBundleVersion,标识(发布或未发布)的内部版本号.这是一个单调增加的字符串,包括一个或多个时期分隔的整数. CFBundleShortVersionString 标识应用程序的发布版 ...
- 30天，APP创业从0到1【7.25上海站】
活动概况 时间:2015年7月25日13:30-16:30 地点:太库•上海孵化器(张江金科路2889号长泰广场c座12楼) 主办:APICloud.诸葛.圣诺资讯 联合主办:微链.太库•上海孵化器 ...
- HTMLCanvasElement.toDataURL()
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI .可以使用 type 参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 如果画布的 ...
- java 部署服务报：Bad version number in .class file
问题原因:服务器jdk版本和class文件的版本不一致,一般是服务器的jdk版本低于class文件的编译版本 解决方案:修改服务器的jdk