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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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 email邮箱正则
2008/10/08 PHP
PHP 危险函数全解析
2009/09/09 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
js实现五星评价功能
2017/03/08 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python中装饰器高级用法详解
2017/12/25 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
银行门卫岗位职责
2013/12/29 职场文书
年终晚会主持词
2014/03/25 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
优秀语文教师事迹
2014/05/18 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server