基于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用的滚屏插件,看着不 ...
随机推荐
- Java高级之内存模型分析
博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 下文是博主感悟,请带着怀疑性的态度阅读! 需要了解基本变量所占 ...
- BeanUtils 学习教程
what happens in more sophisticated environments where you do not necessarily know ahead of time whic ...
- TEST指令
In the x86 assembly language, the TEST instruction performs a bitwise AND on two operands. The flags ...
- 三星的中低端机使用AsyncTask的问题
三星的中低端机上在子线程中使用AsyncTask会报 01-15 23:46:20.165: W/dalvikvm(7259): Exception Ljava/lang/RuntimeExcepti ...
- 从高版本JDK换成低版本JDK报错Unsupported major.minor version 52.0
ava.lang.UnsupportedClassVersionError: PR/Sort : Unsupported major.minor version 52.0这个错误是由于高版本的java ...
- [LeetCode]题解（python）：056-Merge Intervals
题目来源 https://leetcode.com/problems/merge-intervals/ Given a collection of intervals, merge all overl ...
- iOS _BSMachError: (os/kern) invalid capability (20)
_BSMachError: (os/kern) invalid capability (20) 解决办法:将info.plist里面的en改为United States 2016-04-18 22:4 ...
- 我的工具箱之Putty
这是类似于SecureCrt的终端仿真软件,个人感觉比SecureCrt差一点. 下载地址是:http://pan.baidu.com/s/1sko0GrF SecureCrt网址在我的工具箱之Sec ...
- SQL-用JOIN连接多个表
select * from table1 inner join table2 on table1.id=table2.id 其实 INNER JOIN --ON的语法格式可以概括为: ...
- POJ1043问题描述
Description The FBI is conducting a surveillance of a known criminal hideout which serves as a commu ...