css3+javascript实现翻页幻灯片

 

css3+javascript实现翻页幻灯片

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137

<! 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 >

转载于:https://www.cnblogs.com/leibo520/p/7073835.html