基于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用的滚屏插件,看着不 ...
随机推荐
- JavaScript函数小结
JS基础知识 /********************** 1:基础知识 1 创建脚本块 1: <script language=”JavaScript”> 2: JavaScript ...
- java对象中继承和变量初始化顺序浅析
先上例子代码 public class F { int age = 5; public F() { print(); } public void print() { System.out.printl ...
- 用Js的eval解析JSON中的注意点
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- 20145211 《Java程序设计》实验报告五————Java网络编程及安全实验报告
实验内容 1.掌握Socket程序的编写: 掌握密码技术的使用: 设计安全传输系统. 实验步骤 这一部分是与我的partner合作的,详见他的博客- [20145326 <Java程序设计> ...
- hdu1045 Fire Net
在一张地图上建立碉堡(X),要求每行没列不能放两个,除非中间有强挡着.求最多能放多少个碉堡 #include<iostream> #include<cstdio> #inclu ...
- python 递归
学习python,正好用一个例子练习一下递归. 参考文档: http://www.runoob.com/python/python-exercise-example18.html 题目:求s=a+aa ...
- js实现图片向上播放（轮番滚动）
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
- iOS: 实现微信支付
一.介绍: 现在的消费越来越方便,直接带个手机用各种三方的支付平台进行支付就行,例如微信.支付宝.现在正好我所做的项目中用到了微信支付,今天就来整理一下. 二.准备: 1.去微信官方开发者平台注册开发 ...
- POJ 1028解答
#include <iostream>#include <cstdio>#include <cmath>#include <stack>#include ...
- ViewFlipper、ViewPager和Gallery
1.ViewFlipper 1)View切换的控件—ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类.而ViewAnimator类继承于FrameLayout. 查 ...