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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
在js中修改html body的样式
Nov 11 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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 array_multisort() 函数的深入解析
2013/06/20 PHP
在PHP中使用redis
2013/11/04 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python3实现弹弹球小游戏
2019/11/25 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
Delphi工程师笔试题
2013/09/21 面试题
公司开业庆典主持词
2014/03/21 职场文书
三好学生个人总结
2015/02/15 职场文书
校园广播站开场白
2015/06/01 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书