基于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用的滚屏插件,看着不 ...
随机推荐
- 15 款最好的 C/C++ 编译器和集成开发环境
我们有很多编程语言来进行 web 开发,比如 Java,.Net,PHP,Ruby,Perl,Python 等等.今天我们主要讨论的是两大古老而又流行的语言: C 和 C++ ,它们有着许多卓越的特性 ...
- Dreamweaver代码提示快捷键冲突
平时习惯使用Ctrl+空格进行输入法的切换,然后Dreamweaver代码提示的快捷键也是Ctrl+空格,那么只好把Dw的快捷键改掉吧, 选择菜单:编辑->快捷键 复制副本 选择编辑 找到&qu ...
- php 显示某一个时间相当于当前时间在多少秒前，多少分钟前，多少小时前
/* *function:显示某一个时间相当于当前时间在多少秒前,多少分钟前,多少小时前 *timeInt:unix time时间戳 *format:时间显示格式 */ public function ...
- Interview Sort Function
QuickSort Java Code: import java.util.*; public class quickSort{ public static void main(String [] a ...
- python中新式类和经典类的区别
1).python在类中的定义在py2-3版本上是使用的有新式类和经典类两种情况,在新式类和经典类的定义中最主要的区别是在定义类的时候是否出现引用object;如:经典类:Class 类名::而新式类 ...
- java获取当前时间戳的方法
获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 n ...
- App开发需要了解的基本技术
本文针对小白用户对App做一个简单的介绍,首先要了解App都有哪些类型,不同的类型适用于哪些需求,用户可以根据自己的需求选择不同的App开发. 一 App有哪些形式 WebApp:简单来说,Web A ...
- Spring Boot 5 SpringSecurity身份验证
对于没有访问权限的用户需要转到登录表单页面.要实现访问控制的方法多种多样,可以通过Aop.拦截器实现,也可以通过框架实现(如:Apache Shiro.Spring Security). pom.xm ...
- Android Framework框架_转
选自<Android内核剖析> Framework定义了客户端组件和服务端组件功能及接口.包含3个主要部分:服务端,客户端和Linux驱动. (一)服务端 服务端主要包含两个重要类,分别是 ...
- 第三篇 Integration Services：增量加载-Adding Rows
本篇文章是Integration Services系列的第三篇,详细内容请参考原文. 增量加载是什么增量加载仅加载与先前加载差异的.差异包括:->新增的行->更新的行->删除的行通过 ...