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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
Javascript - HTML的request类
Jan 09 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python实现翻转数组功能示例
2018/01/12 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python  logging日志打印过程解析
2019/10/22 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python类如何定义私有变量
2020/02/03 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
校园安全标语
2014/06/07 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python