先上效果图

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			#content{

				width: 500px;

				height: 300px;

				margin: 40px auto;

				position: relative;

				transform-style: preserve-3d;

			}

			#content>div{

				width: 100%;

				height: 100%;

				position: absolute;

				transform-origin: center bottom;

			}

			#content img{

				width: 100%;

				height: 100%;

			}

			#next{

				position: absolute;

				top:190px;

				left: calc(33% - 60px);

			}

			#prev{

				position: absolute;

				top: 190px;

				left: calc(68% + 30px);

			}

			@keyframes next{    //创建一个动画这是一个翻到下面的效果

				from{

					-wbelit-transform: perspective(1000px) rotateX(0deg);  /* 开始位置是 0°*/

					opacity: 1; //初始透明为1

				}

				to{

					-webkit-transform: perspective(1000px) rotateX(-180deg); /*结束位置是 180°*/

					opacity: 0; //结束透明为0

				}

			}

			@keyframes prev{  //创建一个由上边翻到上边的动画

				0%{

					-webkit-transform: perspective(1000px) rotateX(180deg);  /* 初始开始位置 */

					opacity:0;       //初始为透明

				}

				57%

				{

					-webkit-transform:  perspective(1000px) rotateX(-16deg); /* 动画进行到 56% 的时候他为 -16° */

					opacity:1;  //透明已经为1 了

				}

				66%

				{

					-webkit-transform: perspective(1000px) rotateX(14deg);  /* 再回到 14° 的位置 */

				}

				74%

				{

					-webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */

				}

				81%

				{

					-webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */

				}

				87%

				{

					-webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */

				}

				92%

				{

					-webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */

				}

				96%

				{

					-webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置  */

				}

				100%

				{

					-webkit-transform: perspective(1000px) rotateX(0deg);  /* 最后回归 0°  */

				}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

			}

			.next{

				animation: next 1s ease 1 normal 0s; /* 执行向下的动画 */

				transform: rotateX(-180deg); /* 因为初始位置是0 但当你执行完动画还会回到原位 所以它转到哪里就把他设在哪里不要再让它回去了 */

				opacity: 0;

			}

			.prev{

				animation: prev 1.2s ease 1 normal 0s; /* 执行向上的动画 */

				transform: rotateX(0deg); /* 同上 */

				opacity: 1;

			}

		</style>

	</head>

	<body>

		<button id="next">←</button><button id="prev">→</button>

		<div id="content">

			<div class="prev"><img src="data:images/012.jpeg"></div> <!-- 设置默认的第一页 -->

			<div class="next"><img src="data:images/017.jpeg"></div>

			<div class="next"><img src="data:images/020.jpeg"></div>

			<div class="next"><img src="data:images/027.jpeg"></div>

			<div class="next"><img src="data:images/0df3d7ca7bcb0a46ce09bc1e6e63f6246b60afe9.jpg"></div>

		</div>

		<script>

			window.onload=function(){

				var next=document.getElementById("next");

				var prev=document.getElementById("prev");

				var content=document.getElementById("content");

				var oDiv=content.getElementsByTagName("div");

				var x=0;

				next.onclick=function(){   //当向下翻页时

					oDiv[x].setAttribute("class","next"); //第一个页 设置class名让他向下走去

					x++

					if(x>oDiv.length-1){

						x=0

					}

					oDiv[x].setAttribute("class","prev"); //++过后让他的下一个页面起来

				}

				prev.onclick=function(){       //同上只是++变--

					oDiv[x].setAttribute("class","next");

					x--

					if(x<0){

						x=oDiv.length-1

					}

					oDiv[x].setAttribute("class","prev");

				}

			}

		</script>

	</body>

</html>

　　

css3+javascript实现翻页幻灯片的更多相关文章

  1. JAVASCRIPT实现翻页保存已勾选的项目

    <input type="checkbox" name="a" value="1" /><br/> <inpu ...

  2. CSS3——制作图片翻页的小动画

    觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...} ...

  3. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  4. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  5. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  6. css3 --- 翻页动画 --- javascript --- 3d --- Action

    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...

  7. css3 --- 翻页动画 --- javascript --- 3d --- 准备

    用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...

  8. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  9. css3实现翻页卡片

    css3 实现翻页卡片 应用场景挺多的,比如产品信息展示 效果如下 jsfiddle demo transform perspective backface-visibility transform- ...

随机推荐

  1. Tomcat和Mysql部署成Windows服务

    如题: Tomcat部署进入到Tomcat的bin目录,执行命令:service.bat install  [service_name]安装完毕后服务中能看见Apache Tomcat 7.0 [se ...

  2. Https 客户端与服务器交互过程梳理

    本文试图以通俗易通的方式介绍Https的工作原理,不纠结具体的术语,不考证严格的流程.我相信弄懂了原理之后,到了具体操作和实现的时候,方向就不会错,然后条条大路通罗马.阅读文本需要提前大致了解对称加密 ...

  3. Markdown基本语法总结

    一.标题 在想要设置为标题的文字前面加#来表示 一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字. 示例: # 这是一级标题 ## 这是二级标题 # ...

  4. Redis学习笔记（6）——SpringDataRedis入门

    一.SpringDataRedis简介 Spring-data-redis是spring大家族的一部分,提供了在srping应用中通过简单的配置访问redis服务,对reids底层开发包(Jedis, ...

  5. create-react-app安装出错问题解决

    在用create-react-app的时候 报错 错误如下图: 在SF上查到说是或许是因为国内npm拉去资源,拉去不到的问题,可以试着从解决创建create-react-app慢的方法着手: 解决方法 ...

  6. 【转载】TableLayout表格布局详解

    原文地址:http://www.cnblogs.com/manuosex/p/3584701.html 一.Tablelayout简介 Tablelayout类以行和列的形式对控件进行管理,每一行为一 ...

  7. Android中自定义组合控件

    Android中自定义控件的情况非常多,一般自定义控件可以分为两种:继承控件及组合控件.前者是通过继承View或其子类,重写方法实现自定义的显示及事件处理方式:后者是通过组合已有的控件,来实现结构的简 ...

  8. Mac 10.12安装7zip/rar解压/压缩工具7zip-Keka

    说明:Keka支持解压和压缩,基本这个软件全部格式都搞定. 下载: (链接: https://pan.baidu.com/s/1kVmsj8z 密码: pydh)

  9. Scanner类中的nextToken()方法解读

    下面看一下nextToken()方法的源码实现. 1.Java中的控制字符 case ' ': // (Spec 3.6) case '\t': // (Spec 3.6) case FF: // ( ...

  10. nginx故障分析与记录

    本文是对于自己遇到nginx故障的一些记录.便于以后解决问题. 时间:2018_05_11 场景一:某天很多客户在群里反应说访问网站不了,报504错误. 环境:首先说明一点的就是公司网站是美国,日本等 ...