基于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用的滚屏插件,看着不 ...
随机推荐
- git中应用在vs中使用gitignore （转）
在进行协作开发代码管理的过程中,常常会遇到某些临时文件.配置文件.或者生成文件等,这些文件由于不同的开发端会不一样,如果使用git add . 将所有文件纳入git库中,那么会出现频繁的改动和push ...
- Cocos2d-JS目录说明
frameworks---- 引擎所在,包含两个文件夹cocos2d-html5 和js-bindings.前者是html5引擎,后者是-x的引擎,外部接口是js写,但基础模块却是cpp来实现. sa ...
- Spring中Quartz的最精简的配置
<bean id="parserJob4Pos" class="org.springframework.scheduling.quartz.JobDetailBea ...
- 如何对抗 WhatsApp「蓝色双勾」-- 3 个方法让你偷偷看讯息
WhatsApp 强制推出新功能「蓝色双勾 (✔✔)」 ,让对方知道你已经看过讯息.一众用户反应极大,因为以后不能再藉口说未看到讯息而不回覆.究竟以后 WhatsApp 是否真的「更难用」? 幸好还有 ...
- LeetCode -- Triangle 路径求最小和（ 动态规划问题）
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
- mongoDB命令
. getLastError db.runCommand({getLastError:}) . buildInfo //返回mongoDB的服务器版本号和操作系统类型 db.runCommand({} ...
- zero1--hibernate注解02
- LeetCode Lowest Common Ancestor of a Binary Tree
原题链接在这里:https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-tree/ 题目: Given a binary tr ...
- django中嵌入百度editor插件
一.安装和配置步骤: 1.先下载百度ueditor插件,并安装pip install DjangoUeditor 2.把下载好的ueditor插件放到自己的项目中 3.配置setting INSTAL ...
- asp.net 项目在 IE 11 下出现 “__doPostBack”未定义 的解决办法
最近项目在 IE 11 下<asp:LinkButton> 点击出现 “__doPostBack”未定义”,经过一番google,终于知道了原因:ASP.NET 可能无法辨识出一些浏览器的 ...