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入门基础 document.write输出
Feb 22 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
js中call与apply的用法小结
Dec 28 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
JavaScript 异步调用
Oct 25 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
vue框架中props的typescript用法详解
Feb 17 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/03/22 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
小程序实现多选框功能
2018/10/30 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
授权委托书样本
2014/04/03 职场文书
保证书格式范文
2014/04/28 职场文书
企业工会工作总结2015
2015/05/13 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
Python图片检索之以图搜图
2021/05/31 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android