CSS3+JavaScript实现翻页幻灯片效果


Posted in Javascript onJune 28, 2017

先上效果图

CSS3+JavaScript实现翻页幻灯片效果

<!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° */
        }<br>



















      }
      .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="images/012.jpeg"></div> <!-- 设置默认的第一页 -->
      <div class="next"><img src="images/017.jpeg"></div>
      <div class="next"><img src="images/020.jpeg"></div>
      <div class="next"><img src="images/027.jpeg"></div>
      <div class="next"><img src="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实现翻页幻灯片效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
jqgrid 简单学习笔记
May 03 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
Node.js 8 中的重要新特性
Jun 28 #Javascript
Angular排序实例详解
Jun 28 #Javascript
基于JS对象创建常用方式及原理分析
Jun 28 #Javascript
Node.js实现文件上传的示例
Jun 28 #Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 #Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 #Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 #Javascript
You might like
PHP下几种删除目录的方法总结
2007/08/19 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
从0开始的Python学习016异常
2019/04/08 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
优秀毕业生就业推荐信
2014/05/22 职场文书
企业宣传标语
2014/06/09 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
礼仪培训心得体会
2016/01/22 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
python - asyncio异步编程
2021/04/06 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技